常见问题

西安百度推广,西安网站建设,西安竞价开户,西安百度竞价,百度推广开户

西安网站建设:如何用原生JS写Tab切换

iseeyu 2020年10月28日 常见问题 28 views 0

1. 基本思路

① 遍历Tab选项
② 然后给每个Tab选项绑定点击事件
③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式

2. 具体代码实现

<!--HTML--><div id="tab">
    <!--Tab选项-->
    <div class="tab-nav">
        <a href="javascript:;" class="cur">选项1</a>
        <a href="javascript:;">选项2</a>
        <a href="javascript:;">选项3</a>
    </div>
    <!--Tab选项内容-->
    <div class="tab-content">
        <div class="content content1 cur">选项内容1</div>
        <div class="content content2">选项内容2</div>
        <div class="content content3">选项内容3</div>
    </div>
    </div>
/*CSS*/
#tab{ width: 300px; margin: 30px auto;}
.tab-nav{ display: flex;}
.tab-nav a{ flex: 1; line-height: 40px; border: 1px solid #000; text-align: center; text-decoration: none; color: #000;}
.tab-nav a.cur{ color: #fff; background: #000;}
.content{ display: none; width: 100%; height: 300px; color: #fff; box-sizing: border-box; padding: 10px;}
.content.cur{ display: block;}
.content1{ background: #f00; }
.content2{ background: #0f0;}
.content3{ background: #00f;}
//Javascriptwindow.onload = function () {
    var oTab = document.getElementById('tab');
    var aTabNav = oTab.querySelectorAll('.tab-nav a');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');
    for(var i = 0; i < aTabNav.length; i++){   // 遍历Tab选项
        aTabNav[i].onclick = (function (i) {   // Tab选项绑定点击事件
            return function () {
                // 清除所有Tab选项的标记样式
                for(var j = 0; j < aTabNav.length; j++){
                    aTabNav[j].classList.remove('cur');
                }
                aTabNav[i].classList.add('cur');
                // 清除所有Tab选项内容的显示样式
                for(j = 0; j < aTabContent.length; j++){
                    aTabContent[j].classList.remove('cur');
                }
                aTabContent[i].classList.add('cur');
            }
        })(i);
    }};

以上JS还可以继续优化,将相同功能的代码封装成函数:

window.onload = function () {
    var oTab = document.getElementById('tab');
    var aTabNav = oTab.querySelectorAll('.tab-nav a');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');
    for(var i = 0; i < aTabNav.length; i++){
        aTabNav[i].onclick = (function (i) {
            return function () {
                addCurClass(aTabNav,i);
                addCurClass(aTabContent,i);
            }
        })(i);
    }};function addCurClass(obj,index) {
    for(var i = 0; i < obj.length; i++){
        obj[i].classList.remove('cur');
    }
    obj[index].classList.add('cur');}

代码没有什么难度,非常基础,但是需要注意的一点是,在获取当前点击项的索引时,我们需要使用到闭包。

猜你喜欢

发表评论

发表评论:

扫描二维码

手机扫一扫添加微信

13656260040 扫描微信 473362319