Question

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

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>

Answer 1

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

未捕获的TypeError：this.getAttribute不是函数

此错误来自以下行：

tabLinks[id].onclick = showTab();

你必须使用该函数作为参考，否则它将在javascript引擎解析该行后立即执行，更改如下：

tabLinks[id].onclick = showTab;

Answer 2

$(document).ready(function() {
    $('#home').show(); // default shows home tab
	$('#tabs a').on('click', function() { // on click of nav linnk
    	var id = $(this).attr('href'); // find corresponding id
        $('.tabContent').hide(); // hide all tabContent elements
        $(id).show(); // show corresponding clicked tabContent
    });
});

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.1.1/jquery.min.js"></script>
<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>

标签内容不会显示在标签点击上

2 个答案: