zoukankan      html  css  js  c++  java
  • 案例:tab栏切换案例

    切换tab栏并且 显示出tab栏的内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .tab {
                
                 600px;
                height: 50px;
                text-align: center;
                margin: 100px auto;
            }
            .tab_list  {
                 1000px;
                text-align: center;
            }
            .tab_list li {
                background-color: pink;
                 auto;
                /* float: left; */
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
                display:inline-block;
                
            }
    
            .current {
                background-color: red;
                color: #fff;
            }
    
            .item {
                display: none;
            }
            .tab_con {
                text-align: center;
    
            }
    
            
        </style>
    </head>
    <body>
        <div class="tab">
        <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价(50000)</li>
            <li>手机社区</li>
        </ul>
        </div>
    
        <div>
            <div class="tab_con">
                <div class="item" style="display: block;">商品介绍模块内容</div>
                <div class="item">规格与包装模块</div>
                <div class="item">售后保障模块</div>
                <div class="item">商品评价(50000)模块内容</div>
                <div class="item">商品评价(222)模块内容</div>
            </div>
        </div>
    
        </div>
        <script>
            //1.上的模块选项卡 点击某一个 当前这一个底色会是红色 其余不变 修改类名的方式
            var tab_list = document.querySelector('.tab_list');
            var lis = tab_list.querySelectorAll('li');
            var items = document.querySelectorAll('.item');
            //for循环绑定点击事件
            for(var j = 0 ; j< lis.length ; j++)
            {
                //开始给五个li设置索引号
                lis[j].setAttribute('index',j);
                lis[j].onclick = function() {
                    //1.上的选项卡 点击某一个,当前这个底色会是红色 其余不变(排他思想) 修改类名的方式
                    //干掉所有人
                    for (var i = 0 ; i < lis.length ; i++)
                    {
                        lis[i].className = '';
                    }
                    // 留下我自己
                    this.className = 'current';
    
                    //2.显示内容模块
                    var index = this.getAttribute('index');
                    console.log(index);
                    //干掉所有人 让其余的item的div隐藏
                    for(var i = 0 ;i<items.length ;i++)
                    {
                        items[i].style.display = 'none';
                    }
                    //留下我自己
                    items[index].style.display = 'block';
    
                }
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    Flash性能相关
    穿过某点绘制曲线
    oracle 动态列
    oracle 失效对象自动重新编译
    EBS 重新编译无效对象 invalid object
    oracle ebs Customer Info
    Oracle Customer Contacts Info
    Report Builder中的页码问题
    APPFND01564 ORA6502,ORA06512 in afscpcon IE 9
    EBS中发送电子邮件
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/13030043.html
Copyright © 2011-2022 走看看