js(JavaScript)实现TAB标签切换效果的简单实例


Posted in Javascript onFebruary 26, 2014

一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成!
js(JavaScript)实现TAB标签切换效果的简单实例

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-
19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<meta name="keywords" content="JS代码,TAB标签,JS广告代码,JS特效代码,阅微草堂" />
<title>自适应宽度的标签导航</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">


<STYLE type=text/css>
BODY {FONT-SIZE: 14px; FONT-FAMILY: "宋体"}
OL LI { MARGIN: 8px}
#con { FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px}
#tags { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-
TOP: 0px; HEIGHT: 23px}
#tags LI {BACKGROUND: url(images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE:
none; HEIGHT: 23px}
#tags LI A {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(images/tagright.gif) no-repeat right bottom;
FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION:
none}
#tags LI.emptyTag {BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px}
#tags LI.selectTag {BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px}
#tags LI.selectTag A {BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px}
#tagContent { PADDING-RIGHT: 1px; BORDER: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px;  PADDING-TOP:
1px;  BACKGROUND-COLOR: #fff}
.tagContent {PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(images/bg.gif) repeat-x;
PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px}
#tagContent DIV.selectTag {DISPLAY: block}
</STYLE>
<META content="MSHTML 6.00.2800.1589" name=GENERATOR></HEAD>
<BODY>
<DIV id=con>
<UL id=tags>
  <LI class=selectTag><A onMouseover="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</A> </LI>
  <LI><A onMouseover="selectTag('tagContent1',this)" href="javascript:void(0)">标签二</A> </LI>
  <LI><A onMouseover="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</A> </LI>
  <LI><A onMouseover="selectTag('tagContent3',this)" href="javascript:void(0)">自适应宽度</A> </LI>
</UL>
<DIV id=tagContent>
<DIV class=tagContent id=tagContent0>第一个标签的内容</DIV>
<DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容</DIV>
<DIV class=tagContent id=tagContent2>第三个标签的内容</DIV>
<DIV class=tagContent id=tagContent3>第四个标签的内容</DIV>
</DIV>
</DIV>
  <SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
 // 操作标签
 var tag = document.getElementById("tags").getElementsByTagName("li");
 var taglength = tag.length;
 for(i=0; i<taglength; i++){
  tag[i].className = "";
 }
 selfObj.parentNode.className = "selectTag";
 // 操作内容
 for(i=0; j=document.getElementById("tagContent"+i); i++){
  j.style.display = "none";
 }
 document.getElementById(showContent).style.display = "block";
 
}
</SCRIPT>
</BODY></HTML>

Javascript 相关文章推荐
js function使用心得
May 10 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
Vue.use源码学习小结
Jun 20 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
js实现一个简易计算器
Mar 30 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Javascript高级技巧分享
Feb 25 #Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 #Javascript
js判断为空Null与字符串为空简写方法
Feb 24 #Javascript
JS清空多文本框、文本域示例代码
Feb 24 #Javascript
脚本合并提升javascript性能示例
Feb 24 #Javascript
动态加载脚本提升javascript性能
Feb 24 #Javascript
巧用局部变量提升javascript性能
Feb 24 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue中实现滚动加载更多的示例
2017/11/08 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python3序列化与反序列化用法实例
2015/05/26 Python
python os.path模块常用方法实例详解
2018/09/16 Python
详解python:time模块用法
2019/03/25 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python实现图片添加文字
2019/11/26 Python
Tensorflow累加的实现案例
2020/02/05 Python
python与pycharm有何区别
2020/07/01 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
经管应届生求职信
2013/11/17 职场文书
金陵十三钗观后感
2015/06/04 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
openstack中的rpc远程调用的方法
2021/07/09 Python