个人中心
gpt4 book ai didi

javascript - 选项卡内容不会在选项卡单击时显示

转载 作者：太空宇宙 更新时间：2023-11-04 02:48:53 25 4
gpt4 key购买 nike

我有一些标签，但是当我点击标签按钮时它不会显示它的内容。 “主页”选项卡似乎可以正常工作，但在单击之前内容应该是隐藏的。其他选项卡仍无法正常工作。我正在使用谷歌浏览器。

document.getElementById("home").style.display = "inline";
var tabLinks = new Array();
var contentDivs = new Array();

function init() {

  var tabListItems = document.getElementById('tabs').childNodes;
  for (var i = 0; i < tabListItems.length; i++) {
    if (tabListItems[i].nodeName == "LI") {
      var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
      var id = getHash(tabLink.getAttribute('href'));
      tabLinks[id] = tabLink;
      contentDivs[id] = document.getElementById(id);
    }
  }

  var i = 0;

  for (var id in tabLinks) {
    tabLinks[id].onclick = showTab();
    tabLinks[id].onfocus = function() {
      this.blur()
    };
    if (i == 0) tabLinks[id].className = 'selected';
    i++;
  }

  var i = 0;

  for (var id in contentDivs) {
    if (i != 0) contentDivs[id].className = 'tabContent hide';
    i++;
  }
}

function showTab() {
  var selectedId = getHash(this.getAttribute('href'));

  for (var id in contentDivs) {
    if (id == selectedId) {
      tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
  }

  return false;
}

function getFirstChildWithTagName(element, tagName) {
  for (var i = 0; i < element.childNodes.length; i++) {
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
  }
}

function getHash(url) {
  var hashPos = url.lastIndexOf('#');
  return url.substring(hashPos + 1);
}
body {
  background: url('image/bg1.png');
}
nav {
  background: rgba(0, 0, 0, 0);
  height: 80px;
  border-radius: 0px;
}
nav ul {
  width: 50%;
  margin: auto;
}
nav ul li {
  list-style-type: none;
  width: 150px;
  margin-top: 15px;
  float: left;
  border: none;
  text-align: center;
}
li a {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  text-decoration: none;
  color: #333333;
  border-radius: 0px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  line-height: 50px;
  display: block;
  transition: all ease-in-out 250ms;
}
li a:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 8px 8px -6px #333;
  color: #222222;
  padding: 0px 0px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.theme {
  background: rgba(0, 0, 0, 0);
  float: left;
  width: 80px;
  text-align: center;
  margin-left: 15px;
  padding: 10px 15px;
  color: #111;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  border: none;
  transition: all ease-in-out 250ms;
}
.theme:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, .3);
  color: #000;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
  box-shadow: 0 8px 10px -6px #333;
  transition: all ease-in-out 150ms;
  border: none;
}
.theme:active {
  background: rgba(255, 255, 255, .3);
  padding: 10px 15px;
  box-shadow: 0 0 0 #333;
  color: #000;
  text-shadow: 0 0 0 rgba(0, 0, 0, .6);
  border: none;
}
.box {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  padding: 100px 200px;
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 10px 15px -6px #333;
}
div.tabContent {
  display: none;
}
hr.style {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#ordertabs:hover {
  background: #AB1F1F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en-us">

<head>
</head>

<body onload="init()">
  <nav>
    <ul id="tabs">
      <li>
        <a href="#home" style="font-weight: bold;">Home</a>
      </li>
      <li>
        <a href="#products" style="font-weight: bold;">Products</a>
      </li>
      <li>
        <a href="#order" style="font-weight: bold;">Order</a>
      </li>
      <li>
        <a href="#settings" style="font-weight: bold;">Settings</a>
      </li>
    </ul>
  </nav>

  <hr class="style"></hr>

  <div class="tabContent" id="home">
    <div class="box">
      <h2>Welcome</h2>
      <div>
        <p></p>
        <p></p>
      </div>
    </div>
  </div>

  <div class="tabContent" id="products">
    <div class="box">
      <h2>Products</h2>
      <div>
        <p></p>
        <p></p>
      </div>
    </div>
  </div>

  <div class="tabContent" id="order">
    <div class="box">
      <h2>Ready to fail?</h2>
      <div>
        <p></p>
        <ul id="tabs2">	<a href="#order" style="font-weight: bold;">Click to fail</a>
        </ul>
        <div class="tabContent2">
          <div class="box">
            <h2>If you are reading this, you failed.</h2>
            <div>
              <p></p>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </p>
  </div>
</body>

</html>

最佳答案

您在控制台中收到以下错误:

Uncaught TypeError: this.getAttribute is not a function

此错误来自以下行:

tabLinks[id].onclick = showTab();

您必须使用该函数作为引用，否则它会在 javascript 引擎解析该行时立即执行，更改如下:

tabLinks[id].onclick = showTab;

关于javascript - 选项卡内容不会在选项卡单击时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33375118/

25 4 0
文章推荐： html - 为什么我的网页不适合屏幕？
文章推荐： python - 循环和 Collat​​z 猜想
文章推荐： python - 给定数据分布离散化 Pandas 的列
文章推荐： javascript - 如何使用固定的 Navbar 滚动到正确的 div
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com