php tab标签,JavaScript代码分享:tab标签的切换
本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下:
这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。
先来看看运行效果截图:
具体代码如下:/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
点击切换选项卡代码
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}
.menu{height:28px;border-right:#cccccc solid 1px;}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}
var name_0="one";
var cursel_0=1;
var ScrollTime=3000;//循环周期(毫秒)
var links_len,iIntervalId;
οnlοad=function(){
var links = document.getElementById("tab1").getElementsByTagName("li")
links_len=links.length;
for(var i=0; i
links[i].οnmοuseοver=function(){
clearInterval(iIntervalId);
this.οnmοuseοut=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.οnmοuseοver=function(){
clearInterval(iIntervalId);
this.οnmοuseοut=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
- 首页
- 点击看看
- 会自动的
- 我的网站
希望本文所述对大家的javascript程序设计有所帮助。
php tab标签,JavaScript代码分享:tab标签的切换相关推荐
- 格式化html源码正则,用正则表达式格式化html标签的代码分享
< color:red; filter:chroma(color="#0f0f0f"); background-color:#f0f0f0; font-family:verd ...
- JavaScript 代码教程
JavaScript 是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器中的一部分,广泛用于客户端的脚本语言,最早是在HTM ...
- codecombat之KithGard地牢19-37关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 19 ...
- 添加javascript代码:_JavaScript(1)
一.JavaScript组成 1.ECMAScript:是ECMA制定的脚本语言的语法标准,基础语法的规范,为了让不同的浏览器都可以运行通过标准运行出来的代码. 2.文档对象模型(DOM):JavaS ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- php 实体转html,PHP 转HTML标签为实体, 把实体html标签转为,过滤html标签 | 学步园...
1.在开发由于我的需要千变万化.我们得根据需求做各种各样的事情.下面我我在开发中遇到的,HTML标签互转的,记录下来与君共享 实例: $str = preg_replace("//" ...
- codecombat之边远地区的森林12-22关及地牢39关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- codecombat之边远地区的森林1-11关及地牢38关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- 分享113个图片切换JS特效,总有一款适合您
分享113个图片切换JS特效,总有一款适合您 113个图片切换JS特效下载链接:https://pan.baidu.com/s/1NNSP-DMf3n0PeNbdNd8jEg?pwd=sfwr 提取 ...
最新文章
- 对Bridge模式的理解
- 分布式锁-常用技术方案
- 服务器选购seo优化规则,网站seo优化注意事项1—域名和服务器选择
- Spring MVC的表单标签库详解
- concatenate mutliple videos in ffmpeg
- 少样本学习系列(三)【Optimization-Based Methods】
- 微服务学习之Ribbon【Hoxton.SR1版】
- java计算机毕业设计基于安卓Android微信的团务智慧管理小程序uniAPP
- 红宝书第四版的一个错误?
- UltraISO制作启动盘时报错:磁盘/映像容量太小
- 根据RGB配色改变图片颜色
- 记录使用浏览器扫码功能(pad 笔记本 手机)
- Android——新大陆云平台配置(2)
- Cloud-Platform 开源项目环境搭建及运行
- Linux网络设计之实现io_uring用户态接口
- JavaScript 专题(九)数组中查找指定元素
- “转载” 融云IM商用版冰点促销 助程序员的十二时辰躺赢
- 几种常见的数据分区方法
- 第12集 关于库卡机器人对需要减速和插值方式说明
- Lytro光场相机的原理,科普,简单地进行了解