用Javascript点击显示/隐藏Div点击
我试图用Javascript显示/隐藏点击标签,但我得到错误(“Uncaught TypeError:无法设置未定义标签的属性'className'(匿名函数) .onclick“)。有人能告诉我这个问题可能是什么吗?用Javascript点击显示/隐藏Div点击
<style>
a { text-decoration: none; }
li { list-style: none; }
li.selected { font-weight: bold; }
.panels div { display: none; }
.panels .selected { display: block; }
</style>
<div id="tabs" class="tabs">
<ul>
<li class="selected"><a href="javascript:;">One</a></li>
<li class=""><a href="javascript:;">Two</a></li>
<li class=""><a href="javascript:;">Three</a></li>
</ul>
</div>
<div id="panels" class="panels">
<div class="selected">This is panel one.</div>
<div class="">This is panel two.</div>
<div class="">This is panel three.</div>
</div>
<script>
var tabs = document.getElementById("tabs").getElementsByTagName("li");
var panels = document.getElementById("panels").getElementsByTagName("div");
for (var i = 0; i < tabs.length; i++) {
new function(i) {
tabs[i].onclick = function() {
tabs[i].className = panels[i].className = "selected";
for (var i = 0; i < panels.length; i++) {
tabs[i].className = panels[i].className = "";
}
}
}(i);
}
</script>
你的内部for循环有一个变量与外部变量for循环具有相同的名称冲突。
在设置单击元素“选定”之前,您还应该从所有元素中移除所选类。
尝试:
<script>
var tabs = document.getElementById("tabs").getElementsByTagName("li");
var panels = document.getElementById("panels").getElementsByTagName("div");
for (var i = 0; i < tabs.length; i++) {
new function(i) {
tabs[i].onclick = function() {
for (var j = 0; j < panels.length; j++) {
tabs[j].className = panels[j].className = "";
}
tabs[i].className = panels[i].className = "selected";
}
}(i);
}
</script>
这就是我需要的......谢谢。 我已经得到尽可能改变变量来解决冲突,但由于某种原因,我没有想到在运行“for循环”后添加类。 – Dachan 2014-11-07 03:05:12
真的很棘手,刚刚实现http://jsfiddle.net/asz5xb1k/ – 2014-11-07 03:08:59
下面将在这里工作,因为你期望。我在for循环中访问HTML Element时发现了两个问题,您需要使用.item()作为其获取的HTMLCollection而不是数组。此外,您的内循环需要使用不同的循环索引,如果需要另外添加一个条件,请单击一个,如图所示,其余部分隐藏。
<style>
a { text-decoration: none; }
li { list-style: none; }
li.selected { font-weight: bold; }
.panels div { display: none; }
.panels .selected { display: block; }
</style>
<div id="tabs" class="tabs">
<ul>
<li class="selected"><a href="javascript:;">One</a></li>
<li class=""><a href="javascript:;">Two</a></li>
<li class=""><a href="javascript:;">Three</a></li>
</ul>
</div>
<div id="panels" class="panels">
<div class="selected">This is panel one.</div>
<div class="">This is panel two.</div>
<div class="">This is panel three.</div>
</div>
<script>
var tabs = document.getElementById("tabs").getElementsByTagName("li");
var panels = document.getElementById("panels").getElementsByTagName("div");
for (var i = 0; i < tabs.length; i++) {
new function(i) {
tabs[i].onclick = function() {
tabs.item(i).className = panels.item(i).className = "selected";
for (var j = 0; j < panels.length; j++) {
if(i!=j){
tabs.item(j).className = panels.item(j).className = "";
}
}
}
}(i);
}
</script>
你有几个问题:
- 多
i
变量 -
new function(i) {...}
是不是最好的语法。我用下面 - 多种分配闭合每行不好
我已经给你<li>
元素的值,这样我们可以知道哪些li元素已被点击
var tabs = document.getElementById("tabs").getElementsByTagName("li");
var panels = document.getElementById("panels").getElementsByTagName("div");
for (var i = 0; i < panels.length; i++) {
(function(i) {
tabs[i].onclick = function() {
var j;
var panelIndex;
// remove styles from other tabs
for (j = 0; j < tabs.length; j++) {
tabs[j].className = "";
}
// apply style to the current tab: 'this'
this.className = "selected";
// hide other panels
for (j = 0; j < panels.length; j++) {
panels[j].className = "";
}
// show the selected panel
panelIndex = +this.value; // convert value to number
panels[panelIndex-1].className="selected"; // arrays are 0-indexed, so subtract 1
}
})(i);
}
a { text-decoration: none; }
li { list-style: none; }
li.selected { font-weight: bold; }
.panels div { display: none; }
.panels .selected { display: block; }
<div id="tabs" class="tabs">
<ul>
<li value="1" class="selected"><a href="javascript:;">One</a></li>
<li value="2" class=""><a href="javascript:;">Two</a></li>
<li value="3" class=""><a href="javascript:;">Three</a></li>
</ul>
</div>
<div id="panels" class="panels">
<div class="selected">This is panel one.</div>
<div class="">This is panel two.</div>
<div class="">This is panel three.</div>
</div>
也许你想试试Jquery .. – 2014-11-07 02:16:48