                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(五)一Ajax应用与常用插件

威慑么结构是固定死的？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset='utf-8'>
    <title>拖曳排序插件</title>
    <!--<link href="style.css" rel="stylesheet" type="text/css" />-->
 <style type="text/css">
        #divtest {
            width: 282px;
            font-size: 13px;
        }
        p{
            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">
       <ul>
           <li><a href="#ul-1">我最喜欢的运动</a></li>
           <li><a href="#ul-2">我最喜欢的球类</a></li>
       </ul>
        <div id="ul-1">
            <p>1)足球</p>
            <p>2)散步</p>
            <p>3)篮球</p>
            <p>4)乒乓球</p>
            <p>5)骑自行车</p>
        </div>
        <div id="ul-2">
           <p>1)足球</p>
           <p>2)散步</p>
           <p>3)篮球</p>
           <p>4)乒乓球</p>
           <p>5)骑自行车</p>
         </div>
    </div>
</div>

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