基于OO的tab选项卡,加强了语言话和扩展性需特效可合并前面的附加插件用
前言:前段时间一直都好忙也就好久没有写些东西了,最近手上的事刚好告些段落了,把以前空写的写插件都拿出来分享下吧,希望对大家有些帮助,也希望有高手能帮忙指点下我的写不足和错误,一直以来自己写的东西都是在用,性能方面个人只能尽量靠近问题还很多……真心求指点;
插件简介:用于tab选项卡,这个东西网上也很多不过网上的普遍都是ul然后内容是div个人感觉这样的结构不便于语义化,而且当没有js和css 的时候整个页面就无可读性,所以重写的一个大家可以看看
使用方法:在下面的js代码里面前面写了,大家可以看看直接复制粘贴就可以用了有问题可以联系我
JS代码如下,这js代码里面有个查找class的,其实这个东西我之所以没合并进去因为查找class的本身就应该单独做个类是用,demo事例在下面
<!DOCTYPE html><html><head> <title>TAB选项卡示例</title> <style> dl,dt,dd{padding:0;margin:0;font:12px/1.3 'tahoma,geneva,sans-serif';} a:link,a:visited{text-decoration:none} .tab-bx{overflow:hidden;zoom:1;position:relative;padding-bottom:268px;width:333px} .tab-bx dt{position:relative;z-index:10;float:right;display:inline;height:32px;font:14px/32px 'Microsoft YaHei';color:#4d0101;padding:0 5px;cursor:pointer;} .tab-bx dt.cur{border:1px solid #882220;border-bottom:none;background-color:#770301;color:#ebd39d;} .tab-bx dd{display:none;position:absolute;left:0;top:32px;z-index:5;border:1px solid #882220;background:#4d0101;padding:14px 15px 5px;width:301px;} .tab-bx dd a{display:inline;float:left;width:60px;height:25px;line-height:25px;text-align:center;color:#d04343;margin-bottom:6px;overflow:hidden;} .tab-bx dd .cur{background-position:-104px -91px;} </style></head><body><dl class="tab-bx"> <dt>预告</dt> <dd> <a href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> <a href="#">第13集</a> <a href="#">第14集</a> <a href="#">第15集</a> <a href="#">第16集</a> </dd> <dt>花絮</dt> <dd> <a href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> </dd> <dt>粤语</dt> <dd> <a href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> </dd> <dt class="cur">国语</dt> <dd style="display:block;"> <a class="cur" href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> </dd></dl><dl class="tab-bx"> <dt>预告</dt> <dd> <a href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> <a href="#">第13集</a> <a href="#">第14集</a> <a href="#">第15集</a> <a href="#">第16集</a> </dd> <dt>花絮</dt> <dd> <a href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> </dd> <dt>粤语</dt> <dd> <a href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> </dd> <dt class="cur">国语</dt> <dd style="display:block;"> <a class="cur" href="#">第01集</a> <a href="#">第02集</a> <a href="#">第03集</a> <a href="#">第04集</a> <a href="#">第05集</a> <a href="#">第06集</a> <a href="#">第07集</a> <a href="#">第08集</a> <a href="#">第09集</a> <a href="#">第10集</a> <a href="#">第11集</a> <a href="#">第12集</a> </dd></dl><script src="tab.source.js"></script><script> !function(){ //tab var tabMenu = new Tab({element:["tab-bx"]}); tabMenu = null; }();</script></body></html>