当前位置：网站首页>JS 选项卡切换tab

JS 选项卡切换tab

2022-08-09 14:22:00 【JS人柱力】

展示一下原图。
在这里插入图片描述
【HTML代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js" defer></script>
</head>
<body>

    <!-- nav -->
    <div class="nav wrapper">
        <ul>
            <li class="active"><a href="#">按钮1</a></li>
            <li><a href="#">按钮2</a></li>
            <li><a href="#">按钮3</a></li>
        </ul>
    </div>

    <!-- 地区 -->
    <div class="address wrapper">
        <div class="box btns active">
            <input type="button" id="button1" value="北京市" class="active">
            <input type="button" id="button2" value="天津市">
            <input type="button" id="button3" value="上海市">
            <input type="button" id="button4" value="重庆市">
            <input type="button" id="button5" value="河北省">
            <input type="button" id="button6" value="山西省">
            <input type="button" id="button7" value="辽宁省">
            <input type="button" id="button8" value="吉林省">
            <input type="button" id="button9" value="黑龙江省">
            <input type="button" id="button10" value="江苏省">
            <input type="button" id="button11" value="浙江省">
            <input type="button" id="button12" value="安徽省">
            <input type="button" id="button13" value="福建省">
            <input type="button" id="button14" value="江西省">
            <input type="button" id="button15" value="山东省">
            <input type="button" id="button16" value="河南省">
            <input type="button" id="button17" value="湖北省">
            <input type="button" id="button18" value="湖南省">
            <input type="button" id="button19" value="广东省">
            <input type="button" id="button20" value="海南省">
            <input type="button" id="button21" value="四川省">
            <input type="button" id="button22" value="贵州省">
            <input type="button" id="button23" value="云南省">
            <input type="button" id="button24" value="陕西省">
            <input type="button" id="button25" value="甘肃省">
            <input type="button" id="button26" value="青海省">
            <input type="button" id="button27" value="台湾省">
            <input type="button" id="button28" value="内蒙古自治区">
            <input type="button" id="button29" value="广西壮族自治区">
            <input type="button" id="button30" value="西藏自治区">
            <input type="button" id="button31" value="宁夏回族自治区">
            <input type="button" id="button32" value="新疆维吾尔自治区">
            <input style="margin-top: 14px;" type="button" id="button33" value="香港特别行政区">
            <input type="button" id="button34" value="澳门特别行政区">
        </div>
        <div class="box"><h1>helloworld</h1></div>
        <div class="box"><h1>coder小罗</h1></div>

    </div>

    <!-- 内容main -->
    <div class="tab wrapper">
        <div class="active">这是选项卡1</div>
        <div>这是选项卡2</div>
        <div>这是选项卡3</div>
        <div>这是选项卡4</div>
        <div>这是选项卡5</div>
        <div>这是选项卡6</div>
        <div>这是选项卡7</div>
        <div>这是选项卡8</div>
        <div>这是选项卡9</div>
        <div>这是选项卡10</div>
        <div>这是选项卡11</div>
        <div>这是选项卡12</div>
        <div>这是选项卡13</div>
        <div>这是选项卡14</div>
        <div>这是选项卡15</div>
        <div>这是选项卡16</div>
        <div>这是选项卡17</div>
        <div>这是选项卡18</div>
        <div>这是选项卡19</div>
        <div>这是选项卡20</div>
        <div>这是选项卡21</div>
        <div>这是选项卡22</div>
        <div>这是选项卡23</div>
        <div>这是选项卡24</div>
        <div>这是选项卡25</div>
        <div>这是选项卡26</div>
        <div>这是选项卡27</div>
        <div>这是选项卡28</div>
        <div>这是选项卡29</div>
        <div>这是选项卡30</div>
        <div>这是选项卡31</div>
        <div>这是选项卡32</div>
        <div>这是选项卡33</div>
        <div>这是选项卡34</div>
    </div>
</body>


</html>

【CSS代码】

* {
    
  margin: 0;
  padding: 0;
}

ul, li {
    
  list-style: none;
}

input, a {
    
  outline: none;
}

a {
    
  color: #000;
  text-decoration: none;
}

.wrapper {
    
  width: 1200px;
  margin: 0 auto;
}

.nav {
    
  height: 50px;
}

.nav>ul {
    
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;

}

.nav>ul>li.active {
    
  background-color: pink;
}

.address {
    
  height: 100px;
}

.address>.box {
    
  display: none;
}

.address>.box>input.active {
    
  background-color: pink;
}

.address>.box.active {
    
  display: block;
}

.tab {
    
  position: relative;
  height: 300px;
  background-color: skyblue;
  margin-top: 50px;
}

.tab div {
    
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

.tab div.active {
    
  display: block;
}

【JS代码】

//获取三个按钮
let btns = document.querySelectorAll('.nav > ul >li')
let address = document.querySelectorAll('.address > .box')
//forEach循环遍历拿到每个按钮
btns.forEach(function(item,index) {
    
//item就是每个按钮，绑定点击事件
  item.addEventListener('click',function() {
    
  //点击之前让每个按钮先去除相应的样式
      btns.forEach(function(t,i) {
    
          t.classList.remove('active')
          address[i].classList.remove('active')
      })
      item.classList.add('active')
      address[index].classList.add('active')

  })
})

let addBtn = document.querySelectorAll('.address > .box > input')
let tabs = document.querySelectorAll('.tab > div')
addBtn.forEach(function(item,index) {
    
  item.addEventListener('click',function() {
    
    addBtn.forEach(function(t,i) {
    
          t.classList.remove('active')
          tabs[i].classList.remove('active')
      })
      item.classList.add('active')
      tabs[index].classList.add('active')

  })
})
原网站

版权声明
本文为[JS人柱力]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_62336865/article/details/126215117

边栏推荐

猜你喜欢

随机推荐