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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 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
SMARTY学习手记
2007/01/04 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python json转字典字符方法实例解析
2020/04/13 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
日期和时间问题
2015/01/04 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
谢师宴家长致辞
2015/07/27 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
python非标准时间的转换
2021/07/25 Python