网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js多个tab切换简单不需要在body内添加事件

关注我吧
 2010/12/17 8:47:32 阅读次数:5025

不多说了贴代码了!注意的是a的里面的rel属性window.onload事件!在一个页面可以添加多个这样的效果,只需要在 onload事件添加就可以了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
	*{margin:0;padding:0;}
	.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
	*html .clearfix{height:1%;}
	*+html .clearfix{height:1%;}
	.clearfix{display:inline-block;}  
	.clearfix {display:block;} 
	ul{margin:10px 10px 0;}
	ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
	ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
	ul li .crent{background:#fff;color:#f60;}
	p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}
</style>
<title>Example</title>
<script type="text/javascript">
function $(objID){    
    return "string" == typeof(objID) ? document.getElementById(objID) : objID;
    }
function addEvt(tab,ct){
    var ctab = $(tab).getElementsByTagName("a");
	var cdiv = $(ct).getElementsByTagName("p");
    for(var i = 0;i<ctab.length;i++)
    { 
        ctab[i].onclick =function std(){			
			for(var i = 0;i<ctab.length;i++){
				if(i!=parseInt(this.rel-1))
				{
					ctab[i].className="";
					cdiv[i].style.display="none";					
				}
			}
			ctab[parseInt(this.rel)-1].className="crent";
			cdiv[parseInt(this.rel)-1].style.display="block";
        }
    }
}
window.onload=function(){
addEvt("tab","ct");
addEvt("tab2","ct2");
}
</script>
</head>
<body>
<div id="all1">
  <ul class="ul_bigspace" id="tab">
    <li class="clearfix"><a href="#" class="crent" rel="1">平面设计</a><a href="#" rel="2">包装设计</a><a href="#" rel="3">影视广告片</a><a href="#" rel="4">媒介资源</a><a href="#" rel="5">网站设计</a><a href="#" rel="6">网站设计</a></li>
  </ul>
  <div id="ct">
    <p style="display:block;">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
  <br>
  <ul class="ul_bigspace" id="tab2">
    <li class="clearfix"><a href="#" class="crent" rel="1">平面设计</a><a href="#" rel="2">包装设计</a><a href="#" rel="3">影视广告片</a><a href="#" rel="4">媒介资源</a><a href="#" rel="5">网站设计</a><a href="#" rel="6">网站设计</a></li>
  </ul>
  <div id="ct2">
    <p style="display:block;">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>
</body>
</html>


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=64【js多个tab切换简单不需要在body内添加事件】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭