我是javascript的新学习者。所以第一个我不想使用jquery来获取选项卡。以下是我的代码。但它不起作用。如何纠正我的代码。谢谢。
.web_index{ position:relative;}
.web_index div{ width:400px; height:300px; background:#eee; position:absolute; left:30px;top:100px; }
ul li{ float: left; width:100px; height:30px; line-height:30px; list-style:none;}
<script type="text/javascript">
function clicker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");
for(var i=0;i<lier.length;i++){
for(j=0;j<diver.length;j++){
if(i==j)
diver[j].style.display=block;
}else{
diver[j].style.display=none;
}
}
}
}
</script>
</head>
<body >
<ul>
<li onclick="clicker()" class="li01">one</li>
<li onclick="clicker()" class="li02">two</li>
<li onclick="clicker()" class="li03">three</li>
<div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>
我想点击one然后显示content one。所有内容都会被隐藏。然后两个显示content two ...
答案 0 :(得分：0)
请参阅有关实施标签的问题，我建议您以更好的方式进行操作。相同的点击器功能可以使用ID DIV的参数，您可以在调用它时传递它。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Tabs</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
</style>
</head>
<body>
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
<div class="web_index">
<div id="t1">content one</div>
<div id="t2">content two</div>
<div id="t3">content three</div>
</div>
<script type="text/javascript">
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
clicker(1);
</script>
</body>
</html>
我们可以为每个元素提供一个唯一ID，而不是找到元素出现的index。然后，函数支持参数，这就是javascripts的用途。传递该参数并使用元素的.style.display设置样式。
我们不需要将标签定位为绝对标签，因为它不会挂起。而且，您可以使用display: inline-block代替float: left来设置边距。
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
您可以这样重写clicker()脚本：
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
这样，您可以将ID标记的DIV作为参数传递。通过修改元素的style属性，您可以隐藏或显示。
您可以使用相同的<li>函数在onclick中调用此函数，但只需传递另一个额外参数：
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>