点击标签切换和自动切换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/Css 文件的代码
Jul 03 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
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在线生成ico文件的代码
2007/10/09 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
python获得图片base64编码示例
2014/01/16 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
护士实习生自我鉴定范文
2013/12/10 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
春晚观后感
2015/06/11 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python