JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)_javascript技巧

这里演示tab活页夹（网页标签），斑马线，遮罩层、弹出层的简单实现，里面的JS文件，可下拉保存为JS代码调用即可，也可以拷贝在本网页中使用。这个小网页囊括了目前网上流行的风页标签、弹出层以及斑马线效果，很实用啦。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/

具体代码如下：

function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}
function BtTabRemove(index,head,divs) {
 var tab_heads = document.getElementById(head);
 if (tab_heads) {
 var lis = tab_heads.getElementsByTagName("li"); var as = tab_heads.getElementsByTagName("a");
 for(var i=0;i



1:tab

 
 
S1
 
S2
 
S3
 
 
 
 More s1
 s1 content
 
 
 More s2
 s2 content
 
 
 More s3
 s3 content
 
 

BtTabOn("head","s")


2:斑马线


 
厂商指导价
经销商报价
促销信息
报价时间
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15
 
19.08万
19.18万
 
庆贺奇瑞北京突破10万辆全系大酬宾
2008-12-15




 
[企业] 每条最多19个字 
 
[代码] 第一届世界智力运动成式成
 
[企业] 上海通用汽车鼎持全球俱乐部山 
 
[特效] 推动和谐发展 打造绿色企业
 
[企业] 发现商业智慧 见证进步思想
 
[编程] 成就汽车维修“金蓝领”梦想
 
[源码] 发现商业智慧 见证进步思想
 
[风格] 成就汽车维修“金蓝领”梦想
 
[程序] 发现商业智慧 见证进步思想
 
[行业] 成就汽车维修“金蓝领”梦想

BtZebraStrips("hot_car","tr");BtZebraStrips("ul","li")


3:遮罩层
点击弹出
点击关闭

希望本文所述对大家的JavaScript程序设计有所帮助。