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 相关文章推荐
jQuery代码优化 遍历篇
Nov 01 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
动态加载js的几种方法
2006/10/23 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
Python 数据结构之队列的实现
2017/01/22 Python
django的登录注册系统的示例代码
2018/05/14 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python ORM编程基础示例
2020/02/02 Python
简述python Scrapy框架
2020/08/17 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
保荐人的岗位职责
2013/11/19 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
二年级体育教学反思
2014/01/15 职场文书
保护环境倡议书
2014/04/14 职场文书
挂职学习心得体会
2014/09/09 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python