js多个tab切换简单不需要在body内添加事件_js 键盘tab事件如何排除body开始-优快云博客

本文介绍了一个简单的HTML页面，该页面使用纯JavaScript实现了一个带有Tab切换效果的功能。通过为不同的Tab设置rel属性，并利用window.onload事件确保页面加载完成后激活此功能。

注意的是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 运行查看效果