tabs没有效果？-慕课网

tabs没有效果？

来源：3-5 选项卡插件——tabs

web_東

2018-04-23 11:30

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>拖曳排序插件</title>
    
    <style type="text/css">
        #divtest {
            width: 282px;
            font-size: 13px;
        }
        li {
            list-style-type:none;
            padding: 0px;
            margin: 0px;
            line-height: 23px;
        }
    </style>
    <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

</head>

<body>
<div id="divtest">
    <div id="title">
       <div>
           <p><a href="#ul-1">我最喜欢的运动</a></p>
           <p><a href="#ul-2">我最喜欢的球类</a></p>
       </div>
        <ul id="ul-1">
            <li>1)足球</li>
            <li>2)散步</li>
            <li>3)篮球</li>
            <li>4)乒乓球</li>
            <li>5)骑自行车</li>
        </ul>
        <ul id="ul-2">
            <li>1)足球</li>
            <li>2)散步</li>
            <li>3)篮球</li>
            <li>4)乒乓球</li>
            <li>5)骑自行车</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("#title").tabs({
            fx:{opacity:"toggle",height:"toggle"},
            event:"mouseover"
        })
    });
</script>
</body>
</html>

写回答关注

3回答

慕工程9304136

2018-12-11 11:33:26

添加引用<link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
并将id="title"修改为id="tabs"试试

0 0
Chai_陌路

2018-06-07 14:09:31

加上这个样式试试<link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />

0 0
常思已过

2018-06-03 17:40:50

id换成课程中的试试

0 0

jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用，加入学习，有效提高前端开发速度

69100 学习 · 400 问题

查看课程

相似问题

代码没有效果

回答 2

代码没有效果？？

回答 3

为什么没有效果？

回答 1

为什么没有效果

回答 1

为什么没有效果？

回答 2

打开慕课网App查看更多内容