JS实现 Tab栏切换案例

2019/12/08 15:59
阅读数 240

要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变。

结构分析:

  全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子。

  上面的盒子放了 5个li,装着5个小的选项卡,默认会有一个被选中;

  下面的盒子也包含了 5个 div 模块,模块内容与上面的选项一一对应,当前默认的只有第一个 div会被显示出来。

实现思路:

点击切换选项卡部分

Tab 栏切换有2个大的 模块

1、上面模块的选项卡,点击某一个,改变当前样式,底色变为红色,字体颜色变为白色。而其他的选项卡样式不发生改变(排他思想)

通过修改类名的方式实现。

2、下面模块的内容,会随着上面的选项卡变化。所以下面模块变化写到点击事件里面。

规律:下面的模块显示的内容和上面选项卡一一对应,相匹配。

核心思路:给上面模块里面所有的 li 添加自定义属性,属性值从 0 开始作为索引号。


 排他思想:通过 for循环遍历数组中的元素,进入循环之后首先消除所有部分的样式,接着再为所点击的当前部分添加样式。

通过 setAttribute(name,value)创建自定义属性,name指的是为元素设置的自定义属性,value为自定义属性添加的属性值。

通过 getAttribute(name)获取元素的属性。name是属性的名称。

默认第一个选项卡对应的下面模块是显示的,需要在添加行内样式(style='display:block')因为CSS行内样式的优先级高于外部样式,会优先显示。

而(items[index].style.display = 'block';)这一句也相当于创建了行内样式。

 

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab栏切换</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .tab{
        width:800px;
        height:45px;
        border:1px solid #ccc;
        border-bottom:1px solid #c81623;
        background: #fafafa;
        position:relative;
        margin:100px auto;
    }
    .tab_list li{
        width:160px;
        height:45px;
        list-style:none;
        line-height:45px;
        text-align: center;
        float:left;
    }
    .tab_list .current{
        background-color:#c81623;
        color:#fff;
    }
    .item{
        width:800px;
        height: 200px;
        padding-top:40px; 
        /*line-height:200px;*/
        font-size: 30px;
        color:#fff;
        text-align: center;
        text-shadow:2px 2px 4px #000000;
        background: #efefef;
        /*opacity: 0.8;*/
        top:47px;
        position:absolute;
    }
    </style>
</head>
<body>
<div class='tab'>
        <div class='tab_list'>
            <ul>
                <li class='current'>个性推荐</li>
                <li>歌单</li>
                <li>主播电台</li>
                <li>排行榜</li>
                <li>歌手</li>
            </ul>
        </div>
    <div class='tab_con'>
        <div class="item one" style='display:block'>每日歌曲推荐</div>
        <div class="item two">精品歌单倾心推荐,给最懂音乐的你</div>
        <div class="item thr">上瘾烟嗓情感之声</div>
        <div class="item fou">新歌飙升榜</div>
        <div class="item fiv">歌手排行榜</div>
    </div>
</div>
<!--  tab 栏切换有2个模块
 模块的选项卡,点击其中的某一个,被点击的这一个底色将变成红色的,其余的不变(排他思想)使用修改类的名称的方式。 -->
<!--  下面显示模块内容,会随着上面的选项卡变化,所以下面模块变化写到点击事件里面。
 规律:下面模块显示内容和上面的选项卡一一对应,相匹配。
  -->

 <script>
     var tab_list = document.querySelector('.tab_list');
     var lis = tab_list.querySelectorAll('li');
     var items = document.querySelectorAll('.item');
     //for 循环绑定点击事件
     for(var i=0;i < lis.length;i++){
         lis[i].setAttribute('index',i);
        lis[i].onclick = function() {
            //
             for(var i=0;i < lis.length;i++){
                 lis[i].className = '';
             }
             //留下现在需要用的
             this.className = 'current';
             //下面显示内容模块
             var index = this.getAttribute('index');
             console.log(index);
             //去掉其他的 item,让这些隐藏起来
             //只留下当前的 item,让它显示出来
             for(var i=0;i<items.length;i++){
                 items[i].style.display='none';
             }
             items[index].style.display = 'block';
         }
     }
 </script>
</body>
</html>

 实现效果:

 

 点击其它选项

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部