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

最新推荐文章于 2021-05-31 08:24:13 发布

guang730

最新推荐文章于 2021-05-31 08:24:13 发布

阅读量652

点赞数

分类专栏： jquery特效文章标签： jquery 滑动门

本文链接：https://blog.csdn.net/guang730/article/details/24973189

版权

jquery特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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;
            });
        }