点击标签切换和自动切换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同意等待代码实现心得
Jan 01 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
PHP的宝库目录--PEAR
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
django框架模板语言使用方法详解
2019/07/18 Python
详解Django admin高级用法
2019/11/06 Python
virtualenv介绍及简明教程
2020/06/23 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python grpc超时机制代码示例
2020/09/14 Python
化工工艺专业求职信
2013/09/22 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
家长通知书家长评语
2014/04/17 职场文书
地理科学专业自荐信
2014/09/01 职场文书
学生偷窃检讨书
2014/09/25 职场文书
2016年员工年度考核评语
2015/12/02 职场文书