javascript控制制作tab选项卡(兼容ie6,FF,chrome等)
2015-01-17 14:34
615 查看
今天分享一个javascript制作选项卡的代码。所以自己尝试做了,以前一般都是用CSS做的,现在用js做,虽然很简单,不过要考虑到它的可维护性和可重复性,扩展性就要多考虑一些东西了。
下面是我写的代码:
<!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>
<title>js控制tab选项卡效果</title>
<style type="text/css">
*{margin:0 auto;padding:0;}
ul{list-style-type:none;width:200px;height:20px;}
ul li{display:block;width:50px;height:20px;float:left;cursor:pointer;}
.clear{clear:both;}
#content{position:relative;}
.tab0,.tab1,.tab2,.tab3,#content{width:200px;height:200px;}
.tab0,.tab1,.tab2,.tab3{position:relative;}
.tab0{background:#ccc;display:block;}
.tab1{background:#06f;display:none;}
.tab2{background:#f60;display:none;}
.tab3{background:pink;display:none;}
</style>
</head>
<body>
<ul id="menu">
<li style="background:#ccc;" name="t" id="t" onclick="is_click(0);">tab1</li>
<li style="background:#06f;" name="t" id="t" onclick="is_click(1);">tab2</li>
<li style="background:#f60;" name="t" id="t" onclick="is_click(2);">tab3</li>
<li style="background:pink;" name="t" id="t" onclick="is_click(3);">tab4</li>
</ul>
<div class="clear"></div>
<div id="content">
<div name="tab" id="tab" class="tab0">0</div>
<div name="tab" id="tab" class="tab1">1</div>
<div name="tab" id="tab" class="tab2">4</div>
<div name="tab" id="tab" class="tab3">3</div>
</div>
<script type="text/javascript">
var li=document.getElementsByName("t");
var divs=document.getElementsByName("tab");
function is_click(i){
for(var j=0;j<li.length;j++) {
if(j != i){
divs[j].style.display="none";
}else{
divs[j].style.display="block";
}
}
}
</script>
</body>
</html>
点击相应的标题就会显示相应的内容。
哈哈,做好了以后去看了看网上其他人做的淘宝开店tab选项卡后,发现还是我的比较简洁,美啊
可是测试的时候我发现了一个问题
没有ID,只有Name的话,IE下getElementsByName()不能工作,而FF正常。
没有Name人生感悟属性,只有ID的话,IE下getElementsByName()正常,而FF不能工作。
所以我为每一个元素都加上了相同的id和name,这样就兼容了。IE6下也可以完美的工作了
所以,以后如果在遇到用了getElementsByName(),明明有name属性,但在IE中却不能起效,在其他浏览器中却可以起效,不用怀疑,肯定是getElementsByName()这里有问题了,赶紧加个相同值的ID吧!
下面是我写的代码:
<!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>
<title>js控制tab选项卡效果</title>
<style type="text/css">
*{margin:0 auto;padding:0;}
ul{list-style-type:none;width:200px;height:20px;}
ul li{display:block;width:50px;height:20px;float:left;cursor:pointer;}
.clear{clear:both;}
#content{position:relative;}
.tab0,.tab1,.tab2,.tab3,#content{width:200px;height:200px;}
.tab0,.tab1,.tab2,.tab3{position:relative;}
.tab0{background:#ccc;display:block;}
.tab1{background:#06f;display:none;}
.tab2{background:#f60;display:none;}
.tab3{background:pink;display:none;}
</style>
</head>
<body>
<ul id="menu">
<li style="background:#ccc;" name="t" id="t" onclick="is_click(0);">tab1</li>
<li style="background:#06f;" name="t" id="t" onclick="is_click(1);">tab2</li>
<li style="background:#f60;" name="t" id="t" onclick="is_click(2);">tab3</li>
<li style="background:pink;" name="t" id="t" onclick="is_click(3);">tab4</li>
</ul>
<div class="clear"></div>
<div id="content">
<div name="tab" id="tab" class="tab0">0</div>
<div name="tab" id="tab" class="tab1">1</div>
<div name="tab" id="tab" class="tab2">4</div>
<div name="tab" id="tab" class="tab3">3</div>
</div>
<script type="text/javascript">
var li=document.getElementsByName("t");
var divs=document.getElementsByName("tab");
function is_click(i){
for(var j=0;j<li.length;j++) {
if(j != i){
divs[j].style.display="none";
}else{
divs[j].style.display="block";
}
}
}
</script>
</body>
</html>
点击相应的标题就会显示相应的内容。
哈哈,做好了以后去看了看网上其他人做的淘宝开店tab选项卡后,发现还是我的比较简洁,美啊
可是测试的时候我发现了一个问题
没有ID,只有Name的话,IE下getElementsByName()不能工作,而FF正常。
没有Name人生感悟属性,只有ID的话,IE下getElementsByName()正常,而FF不能工作。
所以我为每一个元素都加上了相同的id和name,这样就兼容了。IE6下也可以完美的工作了
所以,以后如果在遇到用了getElementsByName(),明明有name属性,但在IE中却不能起效,在其他浏览器中却可以起效,不用怀疑,肯定是getElementsByName()这里有问题了,赶紧加个相同值的ID吧!
相关文章推荐
- 关于Javascript关闭网页兼容IE6,IE7,IE8,FF,Chrome
- css控制,鼠标移动到DIV层上,更换背景色颜色,兼容IE6,IE7,FF
- javascript:google向上向下滚动特效,兼容IE6,7,8,FF
- Javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- 使用javaScript控制某一控件的点击事件[兼容IE和FF]
- min-height最小高度的实现(兼容IE6、IE7、FF、Chrome)
- javascript控制text只能输入数字(整数,小数),兼容ie,ff,safari【转载】
- 兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome)
- Javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- min-height最小高度的实现(兼容IE6、IE7、FF、Chrome)
- 兼容IE6-9,FF,Chrome的box-shadow效果(纯CSS)
- 【javascript动画之圆形运动】环绕鼠标运动作小球(兼容ie,ff,chrome,……)
- javascript:google 向上向下滚动特效,兼容IE6,7,8,FF
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- 【javascript动画系列之网页白板】javascript实现的白板(兼容ff,ie,chrome,……)
- 收藏兼容ie6 ie7 ie8 ff Chrome 屏蔽鼠标右键
- [JS] - 关闭网页[兼容IE6,IE7,IE8,FF,Chrome]
- javascript 模拟亚马逊左侧导航算法的tab选项卡,支持四个方向,支持tab键切换,兼容各浏览器
- css javascript等兼容IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器详细解决方法