我正在尝试使用最简单的基本Javascripting来制作标签（对于我来说，绝对必须使用简单的Javascript ，没有JQuery或任何其他 ，我只限于在这个项目中使用简单的Javascript）。我已经掌握了几乎所有内容，并且我已经验证了我的HTML和CSS以及检查我文件上的任何运行时错误。标签标题显示出来。
我唯一的问题是标签标题不可点击，我的标签内容也没有显示出来。我做错了什么？
这是一个小提琴：https://jsfiddle.net/1qr0qmzk/
这是我的剧本：
//Tab initialization
window.addEventListener("load", function() {
makeTabs(".tabs")
});
function makeTabs(selector) {
tab_lists_anchors = document.querySelectorAll(selector + "li a");
divs = document.querySelector(selector).getElementsByTagName("div");
for (var i=0; i < tab_lists_anchors.length; i++){
if (tab_lists_anchors[i].classList.contain('active')) {
divs[i].style.display = "block";
}
}
for (i=0; i < tab_lists_anchors.length; i++){
document.querySelector(".tabs li a")[i].addEventListener('click', function(e){
for (i=0; i < divs.length; i++){
divs[i].style.display = "none";
}
for (i=0; i < tab_lists_anchors.length; i++){
tab_lists_anchors[i].classList.remove("active");
}
clicked_tab = e.targed || e.srcElement;
clicked_tab.classList.add('active');
div_to_show = clicked_tab.getAttribute('href');
document.querySelector(div_to_show).style.display = "block";
});
}
}
这是我的标签结构：
<div class="tabs">
<ul> <!-- Tab Headings -->
<li><a href="#" class="active">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab4</a></li>
</ul>
<!-- Tab Contents -->
<div id="tab1">
<h1>Tab 1</h1>
<p>Lorem Ipsum. Contents of tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
<div id="tab2">
<h1>Tab 2</h1>
<p>Contents of tab 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
<div id="tab3">
<h1>Tab 3</h1>
<p>Contents of tab . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
<div id="tab4">
<h1>Tab 4</h1>
<p>Contents of tab 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
</div>
这是我的CSS：
.tabs{
overflow: hidden;
clear: both;
}
.tabs ul{
list-style-type: none;
margin: 0 0 0 0;
bottom: -1px;
position: relative;
}
.tabs li{
float: left;
margin: 0 0;
}
.tabs a{
display: block;
padding: 5px 10px;
background-color: #EEE;
color: #000;
text-decoration: none;
margin: 0;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #DDD;
border-left: 1px solid #DDD;
font: 13px/18px verdana, arial, sans-serif;
}
.tabs a.active{
background-color: #fff;
border-bottom: 1px solid #fff;
}
.tabs div{
clear: both;
border: 1px solid #CCC;
padding: 10px;
font-family: verdana;
font-size: 13px;
background-color: purple;
display: none;
}
编辑：修正了（i-0）错字，纠正为（i = 0）。标签内容仍未显示。
答案 0 :(得分：2)
你的js函数有几个错误。将您的html锚点更改为<a href="#tab2">，<a href="#tab3">等，并更改下面的js
//Tab initialization
window.addEventListener("load", function() {
makeTabs(".tabs")
});
function makeTabs(selector) {
tab_lists_anchors = document.getElementsByTagName("a");
divs = document.querySelector(selector).getElementsByTagName("div");
for (var i = 0; i < tab_lists_anchors.length; i++) {
if (tab_lists_anchors[i].classList.contains('active')) {
divs[i].style.display = "block";
}
}
for (i = 0; i < tab_lists_anchors.length; i++) {
document.getElementsByTagName("a")[i].addEventListener('click', function(e) {
for (i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
for (i = 0; i < tab_lists_anchors.length; i++) {
tab_lists_anchors[i].classList.remove("active");
}
clicked_tab = e.target || e.srcElement;
clicked_tab.classList.add('active');
div_to_show = clicked_tab.getAttribute('href');
document.querySelector(div_to_show).style.display = "block";
});
}
}
答案 1 :(得分：2)
1 - 将i-0更改为i = 0;
2 - 将包含更改为包含
3 - 将querySelector更改为querySelectorAll
4 - 将选择器添加到href
我不再劝告......
//Tab initialization
window.onload = function(){
makeTabs(".tabs");
};
function makeTabs(selector) {
tab_lists_anchors = document.querySelectorAll(selector + " li a");
divs = document.querySelector(selector).querySelectorAll("div");
for (var i=0; i < tab_lists_anchors.length; i++){
if (tab_lists_anchors[i].classList.contains('active')) {
divs[i].style.display = "block";
}
}
for (i=0; i < tab_lists_anchors.length; i++){
document.querySelectorAll(".tabs li a")[i].addEventListener('click', function(e){
for (i=0; i < divs.length; i++){
divs[i].style.display = "none";
}
for (i=0; i < tab_lists_anchors.length; i++){
tab_lists_anchors[i].classList.remove("active");
}
clicked_tab = e.target || e.srcElement;
clicked_tab.classList.add('active');
div_to_show = clicked_tab.getAttribute('href');
document.querySelector(div_to_show).style.display = "block";
});
}
}.tabs{
overflow: hidden;
clear: both;
}
.tabs ul{
list-style-type: none;
margin: 0 0 0 0;
bottom: -1px;
position: relative;
}
.tabs li{
float: left;
margin: 0 0;
}
.tabs a{
display: block;
padding: 5px 10px;
background-color: #EEE;
color: #000;
text-decoration: none;
margin: 0;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #DDD;
border-left: 1px solid #DDD;
font: 13px/18px verdana, arial, sans-serif;
}
.tabs a.active{
background-color: #fff;
border-bottom: 1px solid #fff;
}
.tabs div{
clear: both;
border: 1px solid #CCC;
padding: 10px;
font-family: verdana;
font-size: 13px;
background-color: purple;
display: none;
}<div class="tabs">
<ul> <!-- Tab Headings -->
<li><a href="#tab1" class="active">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab4</a></li>
</ul>
<!-- Tab Contents -->
<div id="tab1">
<h1>Tab 1</h1>
<p>Lorem Ipsum. Contents of tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
<div id="tab2">
<h1>Tab 2</h1>
<p>Contents of tab 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
<div id="tab3">
<h1>Tab 3</h1>
<p>Contents of tab . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
<div id="tab4">
<h1>Tab 4</h1>
<p>Contents of tab 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
</div>
</div>