点击标签切换和自动切换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 操作XML入门
Dec 25 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
jquery实现有过渡效果的tab切换
Jul 17 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 上传文件大小限制
2009/07/05 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
农历与西历对照
2006/09/06 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
解决vue 退出动画无效的问题
2020/08/09 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python中max函数用法实例分析
2015/07/17 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
迟到检讨书400字
2014/01/13 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
大学生自我评价范文
2015/03/03 职场文书
保险内勤岗位职责
2015/04/13 职场文书
小学班级标语口号大全
2015/12/26 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
python如何将mat文件转为png
2022/07/15 Python
LeetCode189轮转数组python示例
2022/08/05 Python