点击标签切换和自动切换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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
PHP4.04简明安装
2006/10/09 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python开发之函数定义实例分析
2015/11/12 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python实现贪吃蛇双人大战
2020/04/18 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
python实现ping命令小程序
2020/12/28 Python
努比亚手机官网:nubia
2016/10/06 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
文明礼貌演讲稿
2014/05/12 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
单位更名证明
2015/06/18 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android