一个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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP中PDO的错误处理
2011/09/04 PHP
php类常量的使用详解
2013/06/08 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
详解Python中的正则表达式的用法
2015/04/09 Python
Python yield 使用浅析
2015/05/28 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python内置加密模块用法解析
2019/11/25 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python多线程thread及模块使用实例
2020/04/28 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
高中自我鉴定
2013/12/20 职场文书
班级寄语大全
2014/04/10 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
科学发展观标语
2014/10/08 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书