• JS实现 Tab栏切换案例


    要求:当鼠标点击上面相应的选项卡(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>

     实现效果:

     点击其它选项

  • 相关阅读:
    关于串口
    assigning to uiimagepickercontrollerdelegate from incompatible type
    CodeSign error: code signing is required for product type 'Application' in SDK 'iOS 7.0'
    使用和不使用navigationbar分别处理显示和返回页面
    iphone坐标系统
    A valid provisioning profile for this executable was not found.
    Could not change executable permissions on the application
    Code Sign error: a valid provisioning profile matching the application's Identifier 'com. sensoSource.VoiceRecorder' could not be found
    从零开始开发iPhone,教你如何在真机调试iPhone应用程序
    iPhone 证书导出分享给多个开发人员操作
  • 原文地址:https://www.cnblogs.com/nyw1983/p/12004172.html
走看看 - 开发者的网上家园