利用HTML+JS制作web选项卡的方法

sandbox37

已于 2022-09-09 22:10:42 修改

阅读量1.5k

点赞数 1

文章标签： html javascript 前端

于 2022-09-09 21:45:56 首次发布

本文链接：https://blog.csdn.net/weixin_59902634/article/details/126785872

版权

选项卡功能：

点击不同的选项按钮，框内出现不同的按钮对应的内容。

制作选项卡的思路：

点击选项卡的时候，对应的选项的类名变为on，对应的内容的类名变为active；其他的选项的类名变为空，其他的内容的类名变为空。

制作选项卡的方法：

方法1（循环绑定+IIEF函数）的步骤:

1.制作好显示模板；

2.获取选项卡对应的选项li和内容对应的内容li；

var aTab = document.querySelectorAll('.tab li');
var aContent = document.querySelectorAll('.content li');

3.循环给aTab集合内的每一个li元素绑定onclick事件函数，用IIEF函数把i变成具体的值，从而获取下标，因为传参数的时候i会变成具体的值，不然i是个变量，会受循环影响；

for (var i = 0, len = aTab.length; i < len; i++) {
      (function (i) {内容})(i);
}

4.将点击事件和修改类名的函数进行绑定，后修改li的类名，方法有下面3种：

方法（1）：循环排他法(先用循环将选项卡和内容内的所有的li的类名设为空，即''，再将循环得到的i对应的选项的li的类名修改为'on'，内容的li的类名修改为'active')

aTab[i].onclick = function () {

  for (var j = 0; j < len; j++) {
    aTab[j].className = '';
    aContent[j].className = '';
  }
  aTab[i].className = 'on';
  aContent[i].className = 'active';

}

方法（2）：轮转法(引入index变量，并将index的变量的初始值设置为0，再将index对应的选项的li的类名修改为''，内容的li的类名修改为''，修改完后将i的值赋予index，再将index对应的选项的li的类名修改为'on'，内容的li的类名修改为'active')

aTab[i].onclick = function () {
  aTab[index].className = '';
  aContent[index].className = '';
  index = i;
  aTab[index].className = 'on';
  aContent[index].className = 'active';
}

方法2（事件委托）的步骤:

1.制作好显示模板；

2.获取选项卡对应的Ul节点，选项卡对应的选项li以及内容对应的内容li；

var oUl = document.querySelector('.tab');
var aTab = document.querySelectorAll('.tab li');
var aContent = document.querySelectorAll('.content li');
var index = 0;

3.事件委托：将li的点击事件传递到Ul，并和修改函数进行绑定，并判断对象是否为li；

oUl.onclick = function (event) {};

4. 根据点击事件修改类名，方法同上。

for (var j = 0, len = aTab.length; j < len; j++) {
  aTab[j].className = '';
  aContent[j].className = '';
}

if (event.target.tagName.toLowerCase() == 'li') {

  index = getElementIdx(event.target);
  aTab[index].className = 'on';
  aContent[index].className = 'active';

}

if (event.target.tagName.toLowerCase() == 'li') {

  aTab[index].className = '';
  aContent[index].className = '';
  index = getElementIdx(event.target);
  aTab[index].className = 'on';
  aContent[index].className = 'active';

}

getElementIdx函数的代码如下：

//获取元素对象下标
function getElementIdx (item) {
  var elements = item.parentNode.children;
  for (var i = 0, len = elements.length; i < len; i++) {
    if (item === elements[i]) {
      return i;
    }
  }
}

模板代码如下：

<!doctype html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta name="keywords" content="选项卡">
  <meta name="description" content="选项卡">
  <title>选项卡</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .wrap {
      display: flex;
      flex-direction: column;
      width: 600px;
      height: 265px;
      box-shadow: 0 0 4px #333;

    }

    .tab {
      display: flex;
      background-color: #666;
    }

    .tab li {
      width: 80px;
      height: 45px;
      line-height: 45px;
      font-size: 20px;
      text-align: center;
      color: #fff;
      background-color: #666;
      border-right: 2px solid orange;
      cursor: pointer;
    }

    .tab li:hover {
      opacity: .8;
    }

    .content {
      position: relative;
    }

    .content li {
      display: none;
      position: absolute;
      width: 100%;
      height: 220px;
      background-color: #368;
      color: #fff;
      font-size: 30px;
    }

    .tab li.on {
      background-color: #fff;
      color: orange;
      font-weight: 700;
    }

    .content li.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <ul class="tab">
      <li class="on">图片</li>
      <li>专栏</li>
      <li>热点</li>
    </ul>
    <ul class="content">
      <li class="active">我是图片的内容</li>
      <li>我是专栏的内容</li>
      <li>我是热点的内容</li>
    </ul>
  </div>
</body>

</html>

总体而言，用事件委托和轮转法比较简单直接点。