tab选项卡切换《超实用的JavaScript代码段》笔记

最新推荐文章于 2025-05-29 19:18:12 发布

sylvia_0815

最新推荐文章于 2025-05-29 19:18:12 发布

阅读量783

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript html css

本文章版权只限本人所有

本文链接：https://blog.csdn.net/sylvia_0815/article/details/121949949

笔记专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现一个简单的选项卡切换功能，通过tab标签点击切换内容块，适合初学者理解DOM操作和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tab选项卡切换</title>
</head>
<style>
  h2,h5,#tooltipMsg,p{
    white-space: nowrap;
  }
  td{
    border: 1px solid #ccc;
    height: 50px;
    text-align: center;
    font-size: 10pt;
    padding: 2px;
  }
  .tabSwitchParent{
    position: relative;
    height: 100px;
    width: 200px;
  }
  .tabSwitchParent div{
    position: relative;
    float: left;
  }
  .tabSwitchTarget{
    display: none;
    left: 0;
    top: 0px;
    z-index: 1;
    width: 324px;
    height: 54px;
    padding: 5px;
    border: 1px solid #ccc;
    color: #666;
  }
  #tabSwitch{
    position: relative;
    float: left;
    z-index: 2;
    top: 1px;
    font-size: 15px;
    margin: 0;
    text-align: center;
    cursor: pointer;
  }
  #tabSwitch .on{
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #fff;
  }
</style>
<body>
  <h2>tab选项卡切换</h2>
  <div class="tabSwitchParent">
    <div id="tabSwitch">
      <div data-targent="tabSwitch1" class="on">选项卡1</div>
      <div data-targent="tabSwitch2">选项卡2</div>
      <div data-targent="tabSwitch3">选项卡3</div>
    </div>
    <div class="talSwitchTarget" style="display: block;color:#123323" id="tabSwitch1">选项卡1内容</div>
    <div class="talSwitchTarget" style="display: none;color:#abcdee" id="tabSwitch2">选项卡2内容</div>
    <div class="talSwitchTarget" style="display: none;color:#444321" id="tabSwitch3">选项卡3内容</div>
  </div>
  <script type="text/javascript">
    window.onload = function () {
      function getTypeElement(es,type) {
        var esLen = es.length,
        i = 0,
        eArr = [],
        esl = null;
        for (; i< esLen;i++) {
          esl = es[i];
          if (esl.nodeName.replace("#", "").toLocaleLowerCase() == type) {
            eArr.push(esl);
          }
        }
        return eArr;
      }
      function tabSwitch(e) {
        var divs = getTypeElement(e.childNodes, "div"),
        l = divs.length,
        i = 0;
        for (; i< l; i++) {
          divs[i].onclick = function () {
            for (var ii = 0; ii < l; ii++) {
              divs[ii].className = "";
              document.getElementById("tabSwitch" + (ii + 1)).style.display="none";
            }
            this.className = "on";
            document.getElementById(this.getAttribute("data-targent")).style.display = "block";
          }
        }
      }
      tabSwitch(document.getElementById("tabSwitch"));
    }
  </script>
</body>
</html>

效果：