纯js实现选项卡

前言：

在代码之前我们要了解一下关键字let

1. let关键字声明的变量只在当前代码块中有效==》块级作用域==》声明的变量不会挂载到window对象上==》解决了全局变量污染的问题
2. let关键字声明的变量不会被提升==》解决了声明提前的问题
3. let关键字声明的变量不允许重复声明==》解决了变量重复声明的问题
4. 如果绑定了事件，用到let来遍历，那么let会记录住你当前元素的下标==》解决了闭包的问题==》以后不用再自定义属性来记录下标了

选项卡就用到了let的第4点
在html中：

 <div class="container">
        <h1>Vanilla JavaScript Tabs Example</h1>

        <div class="js-tabs" id="tabs1">
            <ul class="js-tabs__header">
                <li lzj="0"><a class="js-tabs__title" href="#">Title 1</a></li>
                <li lzj="1"><a class="js-tabs__title" href="#">Title 2</a></li>
                <li lzj="2"><a class="js-tabs__title" href="#">Title 3</a></li>
                <li lzj="3"><a class="js-tabs__title" href="#">Title 4</a></li>
            </ul>
            <div class="js-tabs__content active">
                <h1>ONE</h1>
                <p>Shabby chic ennui cred godard, forage roof party scenester health goth typewriter pitchfork. Stumptown whatever fap, austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free put a bird on it migas forage trust fund.</p>
            </div>
            <div class="js-tabs__content">
                <h1>TWO</h1>
                <p>
                    Shabby chic cred godard, forage roof party scenester health goth typewriter pitchfork. Stumptown whatever fap, austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free put a bird on it migas forage trust fund.
                </p>
            </div>
            <div class="js-tabs__content">
                <h1>THREE</h1><img src="2.jpg" alt="">
            </div>
            <div class="js-tabs__content">
                <h1>FOUR</h1>
                <p>Meggings distillery pop-up artisan, hashtag 90's echo park kickstarter gluten-free. Pinterest gentrify squid vinyl chicharrones meh venmo. Beard aesthetic whatever bicycle rights artisan gastropub. Fingerstache bicycle rights you probably haven't heard of them, schlitz franzen semiotics microdosing.</p>
                <p>Shabby chic ennui cred godard, forage roof party scenester health goth typewriter pitchfork. Stumptown whatever fap, austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free put a bird on it migas forage trust fund.</p>
            </div>
        </div>
    </div>

在css中写入

/* 设置js-tabs下的div隐藏 */
.js-tabs > div {
  display: none;
}
/* 设置js-tabs下的div.active显示 */
.js-tabs > div.active {
  display: block;
}
.js-tabs {
  margin: 2em;
  max-width: 100%;
}
.js-tabs__header {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.js-tabs__header li {
  display: inline-block;
  /* float: left; */
}
.js-tabs__title {
  background: #f5f5f5;
  border: 1px solid #ccc;
  cursor: pointer;
  display: block;
  margin-right: 0.5em;
  padding: 1em 1.5em;
  transition: all 0.25s;
}
.js-tabs__title:hover {
  text-decoration: none;
}
.js-tabs__title-active {
  background: #fff;
  border-bottom-color: #fff;
  border-top-left-radius: 0.75em;
}
.js-tabs__content {
  border: 1px solid #ccc;
  line-height: 1.5;
  margin-top: -1px;
  padding: 1em 2em 3em;
}

在js中写入

function tabs() {
    let uls = document.getElementById("tabs1");
    let lis = uls.getElementsByTagName("li");
    let divs = uls.getElementsByClassName("js-tabs__content");
    for (let i = 0; i < lis.length; i++) { 
        lis[i].onclick = function () {
            //第一种方式
            // for (let j = 0; j < lis.length; j++) {
            //     divs[j].style.display = "none";
            // }
            // divs[i].style.display = "block";
            //第二种方式
            for (let j = 0; j < lis.length; j++) {
                //将divs中的所有divs中的active类名移除
                divs[j].classList.remove("active");
            }
            //给当前点击的li对应的div添加active类名
            divs[i].classList.add("active");
        }
    }
}
tabs();

效果如下：