526互联

使用js和css实现选项卡切换

发布时间 2023-12-22 09:30:45作者: 耿集

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/text.css">
  <link rel="stylesheet" href="./css/tab.css">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <ul>
      <li>选项卡1</li>
      <li>选项卡2</li>
      <li>选项卡3</li>
    </ul>
    <div>选项卡1内容</div>
    <div class="hide">选项卡2内容</div>
    <div class="hide">选项卡3内容</div>
  </div>
</body>
<script src="./js/tab.js"></script>

</html>

js

window.onload = function () { /*window的加载事件处理*/
  var aTab = document.getElementsByTagName("li") /*使用标签名li获取所有选项卡*/
  var content = document.getElementsByClassName("box")[0]; /*使用类名获取最外层的div*/
  var aDiv = content.getElementsByTagName("div"); /*使用父div（最外层div）对象及标签名div获取所有内容div*/
  var len = aTab.length;   /*获取选项卡个数*/
  for (var i = 0; i < len; i++) {   /*循环遍历选项卡，并处理每个选项卡的onmouseover事件*/
    aTab[i].index = i;   /*index是自定义属性，并且属性值等于循环变量值*/
    aTab[i].onmouseover = function () {   /*选项卡的鼠标指针移入事件处理*/
      for (i = 0; i < len; i++) {
        aTab[i].className = '';   /*取消每个选项卡的类名*/
        aDiv[i].className = 'hide';   /*设置每个内容div的类名为hide，隐藏所有内容div*/
      }
      aTab[this.index].className = 'act'; /*设置当前选项卡的类名为act，使之作为选中选项卡*/
      aDiv[this.index].className = ''; /*取消当前选项卡对应内容div的类名，使之显示*/
    };
  }
};

css-tab.css

.box{
  width: 350px;
  margin: 20px auto;
}

.box ul{
  margin: 0;
  padding: 0;
  height: 25px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  list-style: none;
}

.box ul li{
  float: left;
  width: 90px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  background-color: #f5f5f5;
  cursor: pointer;
}

css-text.css

.hide {
  display: none;
}

body,
html {
  font-family: '微软雅黑';
  font-size: 12px;
  line-height: 18px;
}

.box div{
  padding: 20px;
  height: 160px;
  border: 1px solid #ccc;
  border-top: 0px;
}