一个tab标签切换效果代码


Posted in Javascript onMarch 27, 2009

HTML:

<div class="tab"> 
<div id="tabsK"> 
<ul id="menu4"> 
<li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a></li> 
<li onclick="settab(4,1)"><a title="企业新闻"><span>企业新闻</span></a></li> 
<li onclick="settab(4,2)"><a title="行业新闻"><span>行业新闻</span></a></li> 
<li onclick="settab(4,3)"><a title="专栏文章"><span>专栏文章</span></a></li> 
<li onclick="settab(4,4)"><a title="科技新闻"><span>科技新闻</span></a></li> 
</ul> 
</div> <div class="tab2" id="main4"> 
<ul class="block"></ul> 
<ul ></ul> 
<ul ></ul> 
<ul ></ul> 
<ul ></ul> 
</div> 
</div>

CSS:
#tabsK { 
float:left; 
width:100%; 
line-height:normal; 
border-bottom:1px solid #54545C; 
} 
#tabsK ul { 
margin:0; 
padding:10px 10px 0 10px; 
list-style:none; 
} 
#tabsK li { 
display:inline; 
margin:0; 
padding:0; 
cursor:pointer; 
} 
#tabsK a { 
float:left; 
background:url("image/tableftK.gif") no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
#tabsK a span { 
float:left; 
display:block; 
background:url("image/tabrightK.gif") no-repeat right top; 
padding:8px 16px 4px 6px; 
color:#FFF; 
} #tabsK a span {float:none;} 
/* End IE5-Mac hack */ 
#tabsK a:hover span { 
cursor:pointer; 
color:#FFF; 
background-position:100% -42px; 
} 
#tabsK a:hover { 
background-position:0% -42px; 
cursor:pointer; 
} 
#tabsK .hover a 
{ 
background-position:0% -42px; 
} 
#tabsK .hover span 
{ 
background-position:100% -42px; 
} 
.tab2 ul 
{ 
display:none; 
list-style-type:none; 
height:560px; 
} 
.tab2 ul li 
{ 
text-align:left; 
line-height:20px; 
text-indent:1em; 
} 
.tab2 .block 
{ 
display:block; 
}

JS:
<script language="javascript"><!-- 
function settab(m,n){ 
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); 
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); 
for(i=0;i<tli.length;i++){ 
tli[i].className=i==n?"hover":""; 
mli[i].style.display=i==n?"block":"none"; 
} 
} 
// --></script>

截图和用到的两张图片:

 一个tab标签切换效果代码

 

一个tab标签切换效果代码

 

一个tab标签切换效果代码

Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
JavaScript效率调优经验
Jun 04 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
js onpropertychange输入框 事件获取属性
Mar 26 #Javascript
input 高级限制级用法
Mar 26 #Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 #Javascript
JS 常用校验函数
Mar 26 #Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 #Javascript
js GridView 实现自动计算操作代码
Mar 25 #Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 #Javascript
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python3获取cookie常用三种方案
2020/10/05 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
单位成立周年感言
2014/01/26 职场文书
西式婚礼主持词
2014/03/13 职场文书
新学期开学演讲稿
2014/05/24 职场文书
销售员岗位职责
2014/06/09 职场文书
授权委托书格式范文
2014/08/02 职场文书
初中信息技术教学计划
2015/01/22 职场文书
全陪导游词
2015/02/04 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL