选项卡

湳橙

于 2020-08-12 21:30:51 发布

阅读量1k

点赞数 1

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/chenlaodacsdn/article/details/107967246

版权

案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

选项卡

1.需求分析

1.分析：什么是选项卡？
- 点击按钮，切换内容
- 点击某个按钮，切换对应内容
- 点击某个按钮，获取索引，根据索引，切换内容
2.设计：
- 选择元素，变量，是属性，属性写在构造函数内
- 绑定事件
  - 设置样式
  - 计算索引
  - 根据索引切换内容
3.编程：

2.css部分

<body>
 <div class="box">
        <div class="btn">
            <ul class="nav">
                <li class="active">西瓜</li>
                <li>苹果</li>
                <li>橘子</li>
                <li>菠萝</li>
            </ul>
        </div>
        <div class="tabs">
            <ul class="content">
                <li class="active">西瓜详情</li>
                <li>苹果详情</li>
                <li>橘子详情</li>
                <li>菠萝详情</li>
            </ul>
        </div>
    </div>
</body>
 	*{margin: 0;padding: 0;list-style: none;}
    .box{width: 400px;background:pink;margin: 100px auto; cursor:pointer;}
    .nav li{width: 100px;height: 40px;line-height: 40px;background: turquoise; font-size: 20px; text-align: center;float: left;}
    .content li{height: 300px;font-size: 40px;line-height:300px;text-align: center;display: none;}
    .content li.active{display: block;}
    .nav li.active{background: orange;color: white;}

3.js部分

1.jQuery实现选项卡

<body>
    <div class="box">  
            <ul class="nav">
                <li class="active">西瓜</li>
                <li>苹果</li>
                <li>橘子</li>
                <li>菠萝</li>
            </ul>
            <ul class="content">
                <li class="active">西瓜详情</li>
                <li>苹果详情</li>
                <li>橘子详情</li>
                <li>菠萝详情</li>
            </ul>      
    </div>
</body>
<script>
 <script src="./jquery-1.12.4.js"></script>
    $('ul:first li').on('click',function(){
        //被点击的li的类名变成active,其他的都没有类名
        $(this).addClass('active').siblings().removeClass('active')
        .parent().next().children().eq($(this).index()).addClass('active')
        .siblings().removeClass('active');
    })
//链式编程
</script>

2.事件绑定实现选项卡

//1)获取相关元素
        var btns = document.getElementsByClassName('nav')[0].children[0].children;//所有的按钮集合
        var tabs = document.getElementsByClassName('content')[0].children[0].children;//所有的详情页集合
        var type = 'click'
//2.1)绑定事件:使用var i,全局共享这个i,如果要拿到i,需要使用自定义属性
        // for(var i=0;i<btns.length;i++){
        //     btns[i].addEventListener(type,function(){
        //         console.log(i)
        //     })
        // }

//2.2)绑定事件:使用let i,每个循环的代码块都保有自己的一个独立的i
        for(let i=0;i<btns.length;i++){
            btns[i].addEventListener(type,function(){
                for(var j=0;j<btns.length;j++){
                    btns[j].className = "";
                    tabs[j].className = ""
                }
                //把第i个按钮激活,就是当前按钮 ,在事件函数中this就是事件源
                this.className = 'active'        
                //把第i个详情页激活、添加类名
                tabs[i].className = 'active'  
            })
        }

3.面向对象选项卡

 function Tab(){
            this.aspan = document.querySelectorAll(".nav li");
            this.items = document.querySelectorAll(".content li");
        }

        Tab.prototype.addEvent = function(){
            var that = this;
            for(var i=0;i<this.aspan.length;i++){
                this.aspan[i].index = i;
                this.aspan[i].onclick = function(){
                    // this
                    // 设置样式
                    that.setActive(this);
                    // 切换内容
                    that.updateCont(this.index);
                }
            }
        }
        
        Tab.prototype.setActive = function(iNow){
            // 设置样式
            for(var i=0;i<this.aspan.length;i++){
                this.aspan[i].className = "";
            }
            iNow.className = "active";
        }
        
        Tab.prototype.updateCont = function(index){
            // 切换内容
            for(var i=0;i<this.items.length;i++){
                this.items[i].style.display = "none";
            }
            this.items[index].style.display = "block";
        }


        // 原型身上的方法中的this和构造函数中的this是一个this，都表示将来的实例

        var t = new Tab();
        t.addEvent();