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

来源：互联网发布：ubuntu给普通用户权限编辑：程序博客网时间：2024/05/17 06:21

注意的是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"><mce:style></mce:style><style mce_bogus="1"> *{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><mce:script type="text/javascript"></mce:script></head><body><div id="all1"> <ul class="ul_bigspace" id="tab"> <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li> </ul> <div id="ct"> <p style="display:block;" mce_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="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li> </ul> <div id="ct2"> <p style="display:block;" mce_style="display:block;">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </div></div></body></html>

可直接在http://www.ok22.org/art_detail.aspx?id=64 运行查看效果