点击标签切换和自动切换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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery技巧总结
2011/01/01 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
pandas string转dataframe的方法
2018/04/11 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
工作交流会欢迎词
2014/01/12 职场文书
社团文化节策划书
2014/02/01 职场文书
酒店节能降耗方案
2014/05/08 职场文书
作风建设整改方案
2014/10/27 职场文书
高三英语复习计划
2015/01/19 职场文书
刑事辩护词范文
2015/05/21 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL