日期:2014-05-16  浏览次数:20342 次

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

------解决方案--------------------
<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>
------解决方案--------------------
href="" ==> href="#"

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