点击标签切换和自动切换DIV选项卡


Posted in Javascript onAugust 10, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>点击切换和自动切换选项卡</title> 

<style type="text/css"> 

*{list-style:none;margin:0;padding:0;overflow:hidden} 

.tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;} 

.menu{width:400px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;} 

li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden} 

.menudiv{width:399px;height:300px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe} 

.menudiv div{padding:15px;line-height:28px;} 

.off{background:#E0E2EB;color:#336699;font-weight:bold} 

</style> 

<script type="text/javascript"> 

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 links_len,iIntervalId; 

onload=function(){ 

var links = document.getElementById("tab1").getElementsByTagName('li') 

links_len=links.length; 

for(var i=0; i<links_len; i++){ 

links[i].onmouseover=function(){ 

clearInterval(iIntervalId); 

} 

} 

document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){ 

clearInterval(iIntervalId); 

} 

setTab(name_0,cursel_0); 

} 

</script> 

</head> 

<body> 

<h3> </h3> 

<div class="tab1" id="tab1"> 

<div class="menu"> 

<ul> 

<li id="one1" onclick="setTab('one',1)">标签1</li> 

<li id="one2" onclick="setTab('one',2)">标签2</li> 

<li id="one3" onclick="setTab('one',3)">标签3</li> 

<li id="one4" onclick="setTab('one',4)">标签4</li> 

</ul> 

</div> 

<div class="menudiv"> 

<div id="con_one_1"><h4 style="color:red">标签1-内容</h4></div> 

<div id="con_one_2" style="display:none;"><h4 style="color:red">标签2-内容</h4></div> 

<div id="con_one_3" style="display:none;"><h4 style="color:red">标签3-内容</h4></div> 

<div id="con_one_4" style="display:none;"><h4 style="color:red">标签4-内容</h4></div> 

</div> 

</div> 

</body>
Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
js中window.open打开一个新的页面
Aug 10 #Javascript
window.location.href的用法(动态输出跳转)
Aug 09 #Javascript
javascript父、子页面交互技巧总结
Aug 08 #Javascript
jQuery的animate函数学习记录
Aug 08 #Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 #Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 #Javascript
js事件监听机制(事件捕获)总结
Aug 08 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python threading模块操作多线程介绍
2015/04/08 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
详细分析Python collections工具库
2020/07/16 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
大学生自荐书范文
2013/12/10 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
高中优秀作文(范文)
2019/08/15 职场文书