jquery自定义滑动门使用div，非li

来源：互联网发布：淘宝卖男装的那些店好编辑：程序博客网时间：2024/05/20 09:10

div滑动门，之前看到都是li布局，这次自己使用div布局，

首先看下效果图：

首先需要设置html：如下

<div><h3>简洁jQuery滑动门插件 单击切换演示</h3></div><div class="main">    <div id="tabs" class="tabs">        <div class=""><a href="###">导航菜单</a></div>        <div class=""><a href="###">焦点汇聚</a></div>        <div class=""><a href="###">一周生活</a></div>    </div>    <div id="tab_conbox" class="tab_conbox">        <div class="item" style="display:block">conboxtab1</div>        <div class="item" style="display:none">conboxttab2</div>        <div class="item" style="display:none">conboxttab3</div>    </div></div><div><h3>简洁jQuery滑动门插件 鼠标滑过切换演示</h3></div><div class="main">    <div id="tabs2" class="tabs">        <div class=""><a href="###">导航菜单</a></div>        <div class=""><a href="###">焦点汇聚</a></div>        <div class=""><a href="###">一周生活</a></div>    </div>    <div id="tab_conbox2" class="tab_conbox">        <div class="item" style="display:block">conboxtab1</div>        <div class="item" style="display:none">conboxttab2</div>        <div class="item" style="display:none">conboxttab3</div>    </div></div>

给html加上css：

 body        {            text-align:center;           margin:0 auto;            }        .main        {            width:500px;            height:220px;            margin:0 auto;            }        .tabs        {            width:500px;            height:30px;            background-color:Gray;                        }        .tabs div        {            float:left;            width:80px;            text-align:center;          }         .tabs a         {             text-decoration: none;color: #000;font-size: 14px;             line-height:30px;             height:30px;             width:80px;             display:block;         }           .tabs a:hover         {            color:White;            height:30px;            width:80px;         }         .tab_conbox        {            clear:both;            height:200px;            width:498px;            border:1px solid #999;            border-top:none;            text-align:left;            }         .currentTab         {             background-color:Silver;                          }

最后是jquery：

 $(document).ready(function () {            slidingdoor("#tabs", "#tab_conbox", "click");            slidingdoor("#tabs2", "#tab_conbox2", "mouseenter");        });        function slidingdoor(tabs, tabconbox, event) {            $(tabconbox + ">div").hide(); //隐藏所有自div,不包括子孙div            $(tabs + ">div:first").addClass("currentTab").show();            $(tabconbox + ">div:first").show(); //展示第一个内容框            $(tabs + ">div").bind(event, function () {                $(this).addClass("currentTab").siblings("div").removeClass("currentTab"); //当前项显示样式，去除非激活项样式                var activeIndex = $(tabs + ">div").index(this); //获得当前tab的索引                $(tabconbox).children().eq(activeIndex).show().siblings().hide();                return false;            });        }

0 0