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