当前位置：首页 > article >正文

前端-js例子：tab切换

article 2024/11/15 11:16:40

实现效果：

实现步骤：

1. body内容元素

 <div class="container">
        <ul class="top_title">
            <li class="first" index="1">title1</li>
            <li index="2">title2</li>
            <li index="3">title3</li>
            <li index="4">title4</li>
        </ul>
        <div class="tab_content">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
            <div>content4</div>
        </div>
    </div>

2.定义css，修改样式

1>外边框

*{
            padding: 0;
            margin: 0;
        }

2>修改内容样式（让第一个li展示）

.container{
            width: 30%;
            height: 30vh;
            
            margin: 40px auto;
        }
        .container .top_title{
            
            display: flex;
        }
        .container .top_title li{
            list-style: none;
            border: 1px solid black;
            margin-right: 2px;
            padding: 4px;
            cursor: pointer;
            border-bottom: none;
        }
        .container .top_title .first{
            color: #fff;
            background-color: lightgray;
            border-color: black;
        }
        .container .tab_content{
            border: 1px solid black;
            height: 30vh;
        }
        .container .tab_content div{
            height: 100%;
            background-color: aqua;
            display: none;
        }
        .container .tab_content div:first-child{
            display: block;
            background-color: lightblue;
        }

3.js实现样式变化

    window.onload=function(){
            var tab_title_li=document.querySelectorAll(".top_title li")
            var tab_content_div=document.querySelectorAll(".tab_content div")
            console.log(tab_title_li)
            for(var i=0;i<tab_title_li.length;i++){
                // 初始化头部的index属性
                tab_title_li[i].setAttribute("index",i)

                // 绑定事件
                tab_title_li[i].onmouseenter=function(){
                    // 事件触发后标题部分样式有变化+
                    console.log(this)
                    for(var j=0;j<tab_title_li.length;j++){
                        tab_title_li[j].className=""
                    }
                    this.className="first"

                    // 内容部分变化
                    console.log(this.getAttribute("index"))
                    for(var k=0;k<tab_content_div.length;k++){
                        if(k==this.getAttribute("index")){
                            tab_content_div[k].style.display="block"
                            tab_content_div[k].style.background="lightblue";

                        }else{
                            tab_content_div[k].style.display="none"

                        }
                    }
                }
            }

2.多tab切换

实现效果：

实现步骤：

1.body部分多来几个tab元素

<body>
    <div class="container">
        <ul class="top_title">
            <li class="first" index="1">title1</li>
            <li index="2">title2</li>
            <li index="3">title3</li>
            <li index="4">title4</li>
        </ul>
        <div class="tab_content">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
            <div>content4</div>
        </div>
    </div>
    <div class="container">
        <ul class="top_title">
            <li class="first" index="1">title1</li>
            <li index="2">title2</li>
            <li index="3">title3</li>
            <li index="4">title4</li>
        </ul>
        <div class="tab_content">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
            <div>content4</div>
        </div>
    </div>
    <div class="container">
        <ul class="top_title">
            <li class="first" index="1">title1</li>
            <li index="2">title2</li>
            <li index="3">title3</li>
            <li index="4">title4</li>
        </ul>
        <div class="tab_content">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
            <div>content4</div>
        </div>
    </div>
</body>

2.css样式设计

同以上相同

3.js实现切换

在这里需要注意每个数组的转换

 var container=document.querySelectorAll(".container")
            console.log(container)
            for(var h=0;h<container.length;h++){
                // console.log(container[h])
                // 每一组的标题部分
                var tab_title_li=container[h].querySelectorAll("li")
                console.log(tab_title_li)
                for(var i=0;i<tab_title_li.length;i++){
                    // 绑定index属性
                    tab_title_li[i].setAttribute("index",i)
                    // 绑定事件
                    tab_title_li[i].onmouseenter=function(){
                        // 样式切换
                        // console.log(this.parentNode.children)
                        var first_tab_title_li=this.parentNode.children
                        for(var j=0;j<first_tab_title_li.length;j++){
                            first_tab_title_li[j].className=""
                        }
                        this.className="first"

                        // 内容切换
                        // 获取当前被点击的元素身上的index属性值
                        var first_index=this.getAttribute("index")
                        // console.log(first_index)
                        // 获取被点击li所在的组内所有内容元素
                        var first_tab_content_div=this.parentNode.nextElementSibling.children
                        for(var k=0;k<first_tab_content_div.length;k++){
                            if(first_index==k){
                                first_tab_content_div[k].style.display="block"
                                first_tab_content_div[k].style.background="lightblue"

                            }else{
                                first_tab_content_div[k].style.display="none"

                            }
                        }

查看全文

http://www.kler.cn/a/318385.html