JS,TAB,弹出层,斑马线,遮罩层
web前端-js教程
本文实例讲述了JS实现常见的TAB、弹出层效果。分享给大家供大家参考。具体如下：外卖源码出售,vscode获取远程进程id,ubuntu读写ntfs,tomcat内存设置位置,爬虫就是小偷,php 自定义设置,龙岗深企在线seo优化,分类查询网站源码,购物车 网页模板lzw
这里演示tab活页夹（网页标签），斑马线，遮罩层、弹出层的简单实现，里面的JS文件，可下拉保存为JS代码调用即可，也可以拷贝在本网页中使用。这个小网页囊括了目前网上流行的风页标签、弹出层以及斑马线效果，很实用啦。flash 幻灯片 源码,ubuntu16 农历,tomcat8启动慢,scrapy爬虫赚钱,php后端认证方法,推荐seo教程seo高级书籍lzw
运行效果截图如下：自媒体源码带采集,vscode添加JAVA包,ubuntu硬件列表,tomcat本地无法登录,btwaf 爬虫,linux查看php扩展,亳州seo优化哪里有,免费 企业网站管理系统,手机版 个人博客 模板下载lzw
在线演示地址如下：http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/
具体代码如下：
tab活页夹，斑马线，遮罩层）的简单实现 * {margin:0;padding:0;list-style:none;font-size:12px;line-height:20px;font-family:Arial;}h1,h2,h3 { font-size:14px; margin:10px 0;}hr { margin:10px 0; height:1px;clear:both;border:0; background:#c00;}a:link,a:visited{color:#164A84;text-decoration:none;}a:hover,a:active{color:#c00;text-decoration:underline;}table { border-collapse:collapse;border:1px solid #ccc;border-width:1px 1px 0 0; margin-left:20px;}td,th { padding:5px;border:1px solid #ccc;border-width:0 0 1px 1px;}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.tabs {position:relative;width:300px;height:260px;border:1px solid #ccc;margin:0 20px;}.tabs ul {width:200px;height:21px;overflow:hidden;position:absolute;top:0;left:0;}.tabs ul li {float:left;width:60px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-align:center;background:#f5f5f5;}.tabs ul li.current { border-bottom:0; background:#fff;}.tabs ul li a {color:#4a4a4a;display:block;width:100%;font-size:14px;text-decoration:none;}.tabs ul li a:visited { color:#4a4a4a;}.tabs .tablist {height:260px;overflow:hidden;}.tabs .s {width:300px;height:460px;overflow:hidden;text-align:center;font-size:40px;color:#4a4a4a;line-height:160px; background:#fff;}.tabs a.more { background:#fff;color:#4a4a4a;line-height:20px;float:right;padding:0 5px; font-family:Verdana;}1:tabS1 S2 S3BtTabOn("head","s")More s1 s1 contentMore s2 s2 contentMore s3 s3 content
.barry1 {background:#f5f5f5;}.barry0 {background:#fff;}.hover {background:#ddd;}2:斑马线.ul { margin:20px 0 0 20px;width:300px;border:1px solid #ccc;border-bottom:0;}.ul li { height:20px; padding:3px 5px;border-bottom:1px solid #ccc;} [企业] 每条最多19个字 [代码] 第一届世界智力运动成式成 [企业] 上海通用汽车鼎持全球俱乐部山 [特效] 推动和谐发展 打造绿色企业 [企业] 发现商业智慧 见证进步思想 [编程] 成就汽车维修“金蓝领”梦想 [源码] 发现商业智慧 见证进步思想 [风格] 成就汽车维修“金蓝领”梦想 [程序] 发现商业智慧 见证进步思想 [行业] 成就汽车维修“金蓝领”梦想BtZebraStrips("hot_car","tr");BtZebraStrips("ul","li")
厂商指导价 经销商报价 促销信息 报价时间 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
.pop { border:3px solid skyblue;width:400px; background:#fff; padding:5px; display:none;}3:遮罩层点击弹出点击关闭BtPopShow("open","pop");BtPopHide("close","pop")