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

最新推荐文章于 2017-11-25 20:48:00 发布

LMAOhuaNL

最新推荐文章于 2017-11-25 20:48:00 发布

阅读量1.8k

点赞数

分类专栏： JQuery 文章标签： jquery stylesheet xhtml div javascript html

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6727409

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下所用的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>

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

LMAOhuaNL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery特效，上下移动的选项卡

以下所用的Jquery代码库点击这里下载 *{ padding:0px; margin:0px;} body{ font-size:12px;} #accdiorn{ width:400px; he
复制链接

扫一扫

专栏目录