javascript求解 bug

coke0 2013-01-23 01:56:50

<!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>

...全文
130 7 打赏 收藏 举报
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
coke0 2013-01-23
引用 6 楼 bbjbepzz 的回复:
引用 5 楼 coke0 的回复:谢谢,可以了,javascript:void(0);这句话什么作用啊?还有getElementsByTagName ie有兼容问题吗?貌似ie也可以 有什么问题自己先动手解决,有没有兼容问题,你在IE下试下就知道了。不要一碰到问题就发个帖子,贴个代码。当你想尽各种办法都解决不了的时候,再来论坛里面发个帖子,要学会用google。 ……
好的,刚学javascript,我的滑动门做好了。http://blog.csdn.net/coke0/article/details/8533956 高兴
  • 打赏
  • 举报
回复
bbjbepzz 2013-01-23
引用 5 楼 coke0 的回复:
谢谢,可以了,javascript:void(0);这句话什么作用啊?还有getElementsByTagName ie有兼容问题吗?貌似ie也可以
有什么问题自己先动手解决,有没有兼容问题,你在IE下试下就知道了。不要一碰到问题就发个帖子,贴个代码。当你想尽各种办法都解决不了的时候,再来论坛里面发个帖子,要学会用google。
  • 打赏
  • 举报
回复
coke0 2013-01-23
谢谢,可以了,javascript:void(0);这句话什么作用啊?还有getElementsByTagName ie有兼容问题吗?貌似ie也可以
  • 打赏
  • 举报
回复
fzfei2 2013-01-23
href="" ==> href="#" href=""相当于href="/"本面URL,点击后产生刷新的效果,所以 就会返回到初始值
  • 打赏
  • 举报
回复
bbjbepzz 2013-01-23
<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>
  • 打赏
  • 举报
回复
coke0 2013-01-23
那个大侠帮我看看啊,急着学习
  • 打赏
  • 举报
回复
coke0 2013-01-23
为什么我加上a标签后,点击后div就会返回到初始值?不加a标签可以正常的tab滑动门
  • 打赏
  • 举报
回复
发帖
JavaScript

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2013-01-23 01:56
社区公告
暂无公告