我做个js切换门现在能切换，但是侧面导航没选中的效果，求大神帮忙看看，要js原生代码，不要jQ的，面试的
这是源代码<scripttype="text/javascript">window.onload=function(){vartit=document.getElemen...
这是源代码
<script type="text/javascript">
window.onload=function(){
var tit=document.getElementById("tit");
var con=document.getElementById("con");
var li=tit.getElementsByTagName("li");
var divs=con.getElementsByTagName("div");
for(i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(i=0;i<li.length;i++){
li[i].className="";
divs[i].className="";
}
this.className="one";
divs[this.index].className="two";
}
}
}
</script>
</head>
<body>
<div class="conter">
<div class="con-left">
<div class="con-left-header">
<div class="con-phono">
<a href="#"><img src="bian.jpg" height="144" width="144" /></a>
</div>
</div>
<div class="con-left-con">
<p class="p1">xiaoying</p>
<ul>
<li class="vip">年会员</li>
<li class="vip">2015-06-06到期</li>
<li class="vip-ony"><a href="#">VIP会员续费</a></li>
</ul>
</div>
<div class="con-left-foot" id="tit">
<ul>
<li class="one">我的课程</li>
<li onClick="style='background:#555'">课程回答</li>
<li>我的账户</li>
</ul>
</div>
</div>
<div class="con-right" id="con">
<div class="two">课程有数学语文</div>
<div>提问一：老师叫什么 答：爱德华</div>
<div>账户：密码：</div>
</div>
</div> 展开
<script type="text/javascript">
window.onload=function(){
var tit=document.getElementById("tit");
var con=document.getElementById("con");
var li=tit.getElementsByTagName("li");
var divs=con.getElementsByTagName("div");
for(i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(i=0;i<li.length;i++){
li[i].className="";
divs[i].className="";
}
this.className="one";
divs[this.index].className="two";
}
}
}
</script>
</head>
<body>
<div class="conter">
<div class="con-left">
<div class="con-left-header">
<div class="con-phono">
<a href="#"><img src="bian.jpg" height="144" width="144" /></a>
</div>
</div>
<div class="con-left-con">
<p class="p1">xiaoying</p>
<ul>
<li class="vip">年会员</li>
<li class="vip">2015-06-06到期</li>
<li class="vip-ony"><a href="#">VIP会员续费</a></li>
</ul>
</div>
<div class="con-left-foot" id="tit">
<ul>
<li class="one">我的课程</li>
<li onClick="style='background:#555'">课程回答</li>
<li>我的账户</li>
</ul>
</div>
</div>
<div class="con-right" id="con">
<div class="two">课程有数学语文</div>
<div>提问一：老师叫什么 答：爱德华</div>
<div>账户：密码：</div>
</div>
</div> 展开
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
.one {
background-color: red;
}
.two {
background-color: blue;
}
</style>
<script>
var index = 0;
window.onload = function() {
var tit = document.getElementById("tit");
var con = document.getElementById("con");
var li = tit.getElementsByTagName("li");
var divs = con.getElementsByTagName("div");
for (var i = 0; i < li.length; i++) {
(function(i) {
li[i].onclick = function() {
li[index].className = "";
divs[index].className = "";
li[i].className = "one";
divs[i].className = "two";
index = i;
}
})(i);
}
}
</script>
</head>
<body>
<div class="conter">
<div class="con-left">
<div class="con-left-header">
<div class="con-phono">
<a href="#">
<img src="bian.jpg" height="144" width="144" />
</a>
</div>
</div>
<div class="con-left-con">
<p class="p1">xiaoying</p>
<ul>
<li class="vip">年会员</li>
<li class="vip">2015-06-06到期</li>
<li class="vip-ony"> <a href="#">
VIP会员续费
</a>
</li>
</ul>
</div>
<div class="con-left-foot" id="tit">
<ul>
<li class="one">我的课程</li>
<li>课程回答</li>
<li>我的账户</li>
</ul>
</div>
</div>
<div class="con-right" id="con">
<div class="two">课程有数学语文</div>
<div>提问一：老师叫什么 答：爱德华</div>
<div>账户：密码：</div>
</div>
</div>
</body>
</html>
追问
样式占不了，这只是常见的导航切窗口的效果，我加不上导航的选中效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
