JQuery特效，上下移动的选项卡

最新推荐文章于 2017-01-22 08:46:55 发布

原创最新推荐文章于 2017-01-22 08:46:55 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #stylesheet #xhtml #div #javascript #html

JQuery 专栏收录该内容

7 篇文章

订阅专栏

以下所用的Jquery代码库点击这里下载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *{ padding:0px; margin:0px;}
        body{ font-size:12px;}
        #accdiorn{ width:400px; height:200px; margin:100px; }
        #accdiorn h3{ font-size:16px; line-height:4px; font-weight:normal;}
    </style>
        <!--uiplus/themes/ui-lightness导入这个路径下的样式文件-->
       <link rel="stylesheet" type="text/css" href="../JQuery/uiplus/themes/ui-lightness/jquery.ui.all.css" />
        <!--导入jquery-1.6.2.min.js--> 
       <script src="../JQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
        <!--以下导入的jquery代码库均是 http://jqueryui.com/download 这里下载的，导入的顺序绝对不能变的--> 
       <script src="../JQuery/uiplus/ui/jquery.ui.core.js" type="text/javascript"></script>
       <script src="../JQuery/uiplus/ui/jquery.ui.widget.js" type="text/javascript"></script>
       <script src="../JQuery/uiplus/ui/jquery.ui.accordion.js" type="text/javascript"></script>
       <script type="text/javascript" language="javascript">
           $(function () {
               $("#accdiorn").accordion(); //调用代码库的这个方法就可以上下移动
           });
       </script>
</head>
<body>
<!--以下这种html格式不可更改-->
    <div id="accdiorn">
        <h3><a href="#">选项1</a></h3>
        <div>
            <p>I am choice 1</p>
            <p>I am choice 1</p>
            <p>I am choice 1</p>
            <p>I am choice 1</p>
        </div>
        <h3><a href="#">选项2</a></h3>
        <div>
            <p>I am choice 2</p>
            <p>I am choice 2</p>
            <p>I am choice 2</p>
            <p>I am choice 2</p>
        </div>
        <h3><a href="#">选项3</a></h3>
        <div>
            <p>I am choice 3</p>
            <p>I am choice 3</p>
            <p>I am choice 3</p>
            <p>I am choice 3</p>
        </div>
    </div>
</body>
</html>

上面是效果图，样式可以自己更改