这个JS代码为什么没用？

<scripttype="text/javascript">varnav=document.getElementById("tab-nav");varlis=docume... <script type="text/javascript">
var nav = document.getElementById("tab-nav");
var lis = document.getElementsByTagName("li");
var divs = document.getElementById("tab-con").document.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
for (var i = 0; i < lis.length; i++) {
if(this==lis[i]){
lis[i].className="select";
divs[i].className="show";
}
else{
lis[i].className="";
divs[i].className="";
}
}
</script>

<style type="text/css">
ul,li,div{padding: 0; margin: 0; }
ul li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #fff;
border: 1px #bbb solid;
border-bottom: none;
}
ul li.select{
background: #ccc;
color: red;
}
ul{
overflow: hidden;
zoom:1;
list-style-type: none;
}
#tab-con{width: 350px;height: 200px;}
#tab-con div{
width: 350px;
height: 200px;
display: none;
border: 1px #bbb solid;
border-top: none;
}
#tab-con div.show{
display: block;
background-color: #ccc;
}
</style>

<div id="zdfz-body">
<ul id="tab-nav">
<li class="select">tab1</li>
<li> tab2 </li>
<li> tab3 </li>
</ul>

<div id="tab-con">
<div class="show ">aaa </div>
<div> bbb</div>
<div> ccc</div>
</div>

这个代码为什么不行呢？展开

 我来答

2个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

weilongks
2016-07-19 · TA获得超过161个赞

知道小有建树答主

回答量：63

采纳率：0%

帮助的人：96.1万

我也去答题访问个人页

关注

展开全部

给你改了下，里面很多大括号没没闭合，js位置给你调整了下，只有加载完html标签才能用js访问元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<style type="text/css">
ul,li,div{padding: 0; margin: 0; }
ul li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #fff;
border: 1px #bbb solid;
border-bottom: none;
}
ul li.select{
background: #ccc;
color: red;
}
ul{
overflow: hidden;
zoom:1;
list-style-type: none;
}
#tab-con{width: 350px;height: 200px;}
#tab-con div{
width: 350px;
height: 200px;
display: none;
border: 1px #bbb solid;
border-top: none;
}
#tab-con div.show{
display: block;
background-color: #ccc;
}
</style>

<div id="zdfz-body">
<ul id="tab-nav">
<li class="select">tab1</li>
<li> tab2 </li>
<li> tab3 </li>
</ul>

<div id="tab-con">
<div class="show ">aaa </div>
<div> bbb</div>
<div> ccc</div>
</div>

<script type="text/javascript">
var nav = document.getElementById("tab-nav");
var lis = document.getElementsByTagName("li");
var divs = document.getElementById("tab-con").getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
for (var i = 0; i < lis.length; i++) {
if(this==lis[i]){
lis[i].className="select";
divs[i].className="show";
}else{
lis[i].className="";
divs[i].className="";
}
}
}
}
</script>
</body>

本回答由提问者推荐

已赞过 已踩过<

评论收起

神奇的嗢石兰
2016-07-19 · 超过19用户采纳过TA的回答

知道答主

回答量：57

采纳率：33%

帮助的人：18.7万

我也去答题访问个人页

关注

展开全部

把js写在body下边，因为js运行的时候 dom树没有加载好，或者用window。onload包裹起来

追问

依然没用

追答



Title

tab1
 tab2 
 tab3 

aaa 
 bbb
 ccc

var nav = document.getElementById("tab-nav");
		var lis = document.getElementsByTagName("li");
		var divs = document.querySelectorAll("div");
		console.log(lis,divs);
		for(var i=0;i

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

这个JS代码为什么没用？

其他类似问题

为你推荐：