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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
修改npm全局安装模式的路径方法
May 15 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
Dedecms常用函数解析
2008/02/01 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
python 如何在测试中使用 Mock
2021/03/01 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
init进程的作用
2015/08/20 面试题
终端业务员岗位职责
2013/11/27 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
大家访活动实施方案
2014/03/10 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
小学教育见习报告
2014/10/31 职场文书
西岭雪山导游词
2015/02/06 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python