tab切换-2016.6.4

2023-01-09 21:34:53

以前的tab切换，一般都是自己找网上的源代码，不知道含义，直接套，然后会有一些不知道的问题出现。最近学习了jq（当然属于懒人的我，学习进度很慢），然后再工作中遇到了tab选项卡，所以决定自己写一个。

效果展示（没有美化）：

即当鼠标点击头部上面菜单时，底下相对应的div出现。

HTML:

<div class="div-tab">

        <ul class="div-tab-head">

            <li class="head-on">周一</li>

            <li>周二</li>

            <li>周三</li>

            <li>周四</li>

            <li>周五</li>

            <li>星期六</li>

            <li>星期天</li>

        </ul>

        <!--周一-->

        <div class="week week-on">

            <a href="#">语文</a>

            <a href="#">语文</a>

            <a href="#">语文</a>

            <a href="#">语文</a>

            <a href="#">语文</a>

            <a href="#">语文</a>

            <a href="#">语文</a>

            <a href="#">语文</a>

        </div>

        <!--周二-->

        <div class="week">

            <a href="#">数学</a>

            <a href="#">数学</a>

            <a href="#">数学</a>

            <a href="#">数学</a>

            <a href="#">数学</a>

            <a href="#">数学</a>

            <a href="#">数学</a>

            <a href="#">数学</a>

        </div>

        <!--周三-->

        <div class="week">

            <a href="#">英语</a>

            <a href="#">英语</a>

            <a href="#">英语</a>

            <a href="#">英语</a>

            <a href="#">英语</a>

            <a href="#">英语</a>

            <a href="#">英语</a>

            <a href="#">英语</a>

        </div>

        <!--周四-->

        <div class="week">

            <a href="#">地理</a>

            <a href="#">地理</a>

            <a href="#">地理</a>

            <a href="#">地理</a>

            <a href="#">地理</a>

            <a href="#">地理</a>

            <a href="#">地理</a>

            <a href="#">地理</a>

        </div>

        <!--周五-->

        <div class="week">

            <a href="#">化学</a>

            <a href="#">化学</a>

            <a href="#">化学</a>

            <a href="#">化学</a>

            <a href="#">化学</a>

            <a href="#">化学</a>

            <a href="#">化学</a>

            <a href="#">化学</a>

        </div>

        <!--星期六-->

        <div class="week">

            <a href="#">生物</a>

            <a href="#">生物</a>

            <a href="#">生物</a>

            <a href="#">生物</a>

            <a href="#">生物</a>

            <a href="#">生物</a>

            <a href="#">生物</a>

            <a href="#">生物</a>

        </div>

        <!--星期天-->

        <div class="week">

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

            <a href="#">信息技术</a>

        </div>

    </div>

CSS:

/*tab切换*/

.div-tab{ width: 100%; height: auto; background-color: #6ED1EF; overflow: hidden;}

.div-tab-head{ width: 100%; height: auto; overflow: hidden; background-color: #58C0E0;}

.div-tab-head>li{ width: 13.9%; text-align: center; padding: 1rem 0; float: left; font-size: 1.5rem; color: #000; font-weight: bold;}

.div-tab-head>li:nth-child(1){ margin-left: 2px;}

.week{ display: none; width: 100%;}

.week>a{ padding: 1rem; margin: 0.5rem; display: inline-block;}

.head-on,.week-on{ background-color: #fff;}

.week-on{ display: block;}

JQ:

 <script type="text/javascript">

     $(".div-tab-head>li").click( function(){

         var index=$(this).index();

         $(this).addClass("head-on").siblings().removeClass("head-on");

         $(".week").addClass("week-on").eq(index).siblings(".week").removeClass("week-on");

     });

 </script>

码农公寓

相关文章