javascript求解 bug


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#tab{
border:1px solid #003500;
width:200px;
height:25px;
text-align:left;}
#tab ul{
padding:0px;
margin:0px;
width:200px;
height:25px;
}
#tab ul li{
float:left;
list-style:none;
text-align: center;
width:50px;
height:25px;
line-height:25px;
font-size:12px;}
#tab ul li a{
font-size:12px;
color:#000;
text-decoration:none;}
#tab ul li a:hover{
font-size:12px; text-decoration:none;}
#tab ul li.one{
background:#fff;
color: #000;}
#tab ul li.two{
background:#003500;
color: #FFF;
}
#tablist{
border:1px solid #003500;
border-top:none;
width:200px;
height:200px;
text-align:left;
}
#tablist .one{
display:block;}
#tablist .two{
display:none;}
</style>
<script>
window.onload = function()
{
var oTabLi= document.getElementById('tab').getElementsByTagName('li');
var oTabList= document.getElementById('tablist').getElementsByTagName('div');;
var i=0;
for(i=0;i<oTabLi.length;i++)
{
oTabLi[i].index = i;
oTabLi[i].onclick = (function(){
for(var j=0;j<oTabList.length;j++)
{
oTabList[j].className='two';
}
oTabList[this.index].className='one';
});
};
};
</script>
</head><body>
<div id="tab">
<ul>
<li class="one"><a href="">网易</a></li>
<li class="two"><a href="">搜狐</a></li>
<li class="two"><a href="">百度</a></li>
<li class="two"><a href="">谷歌</a></li>
</ul>
</div>
<div id="tablist">
<div class="one">001</div>
<div class="two">002</div>
<div class="two">003</div>
<div class="two">004</div>
</div>
</body>
</html>javascript  tab

解决方案 »

  1.   

    为什么我加上a标签后，点击后div就会返回到初始值？不加a标签可以正常的tab滑动门
      

  2.   

    <li class="one"><a href="javascript:void(0);">网易</a></li>
    <li class="two"><a href="javascript:void(0);">搜狐</a></li>
    <li class="two"><a href="javascript:void(0);">百度</a></li>
    <li class="two"><a href="javascript:void(0);">谷歌</a></li>
      

  3.   

    href="" ==> href="#"href=""相当于href="/"本面URL，点击后产生刷新的效果，所以  就会返回到初始值
      

  4.   

    谢谢，可以了，javascript:void(0);这句话什么作用啊?还有getElementsByTagName ie有兼容问题吗？貌似ie也可以
      

  5.   


    有什么问题自己先动手解决，有没有兼容问题，你在IE下试下就知道了。不要一碰到问题就发个帖子，贴个代码。当你想尽各种办法都解决不了的时候，再来论坛里面发个帖子，要学会用google。
      

  6.   


    好的，刚学javascript，我的滑动门做好了。http://blog.csdn.net/coke0/article/details/8533956  高兴