个性TAB选项卡

最新推荐文章于 2022-05-23 16:47:04 发布

w40338544

最新推荐文章于 2022-05-23 16:47:04 发布

阅读量761

点赞数

分类专栏： HTML 文章标签： class function xhtml float null border

本文链接：https://blog.csdn.net/w40338544/article/details/5788061

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

比较个性的网页选项卡，一改方方正正的风格，换为这种菱形的样式，看上去很生动，鼠标点击后切换，而非滑动门，代码段演示了在同一个网页中调用两个TAB选项卡，方便你的调用。

<!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=gb2312" /> <title>选项卡</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;} h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;} ul{list-style:none;} a{text-decoration:none;} .display_none{display:none;} /*选项卡的样式*/ .convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://codefans.net/jscss/demoimg/200903/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的区域是table，那么padding-right:2px;*/ .convention_tab li{float:left;background:url(http://codefans.net/jscss/demoimg/200903/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;} .convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;} .convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;} .convention_tab li.current_tab a{background-color:#98B1C5;color:#000;} .convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;} .convention_tab li.start_tab a{padding-left:10px;} .convention_tab li#end_tab{background-position:right -50px;} .convention_tab li#end_tab a{padding-left:10px;} .convention_tab li.current_tab#end_tab{background-position:right -140px;} .convention_tab li.current_tab#end_tab a{background-color:#98B1C5;} /*每个item*/ #cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;} #cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;} #cardarea2 dl{text-align:left;padding:20px;line-height:23px;}</style> </head> <body> <div class="container"> <ul id="nav" class="convention_tab"> <li class="start_tab current_tab"><a href="#" mce_href="#">CodeFans.net</a></li> <li><a href="#" mce_href="#">源码更新</a></li> <li><a href="#" mce_href="#">ASP源码</a></li> <li><a href="#" mce_href="#">PHP更新</a></li> <li id="end_tab"><a href="#" mce_href="#">VB更新</a></li> </ul> <div id="cardarea"> <div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div> <p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在</html>以保证xhtml已经加载完毕</p> <p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p> <p class="item display_none">PHP更新的内容</p> <p class="item display_none">VB更新的内容</p> </div> <ul id="nav2" class="convention_tab"> <li class="start_tab current_tab"><a href="/" mce_href="">源码爱好者</a></li> <li><a href="#" mce_href="#">使用方法</a></li> <li><a href="#" mce_href="#">下载排行</a></li> <li><a href="#" mce_href="#">源码分类</a></li> <li id="end_tab"><a href="#" mce_href="#">最后一个</a></li> </ul> <div id="cardarea2"> <p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p> <p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;" mce_style="font-family:Georgia, 'Times New Roman', Times, serif;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> </span>即可完成事件添加,多个区域用竖线隔开。</p> <div class="item display_none"> <dl> <dt>id为kp_OtherRegional的input元素共有5个参数</dt> <dd>第一个:表示id为nav的那个元素。</dd> <dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd> <dd>第三个:切换区域的父容器,切换区域的父容器ID</dd> <dd>第四个:<p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd> <dd>第五个:切换标签后当前标签的样式名。</dd> </dl> </div> <p class="item display_none">这里是第四个区域</p> <p class="item display_none">第五个</p> </div> </div> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> <mce:script type="text/javascript"></mce:script> </body> </html>