一个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 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue项目实现分页效果
Mar 24 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
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
Opacity.js
2007/01/22 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python读取csv文件实例解析
2019/12/30 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python软件都是免费的吗
2020/06/18 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
新员工入职感言
2014/02/01 职场文书
食品业务员岗位职责
2014/03/18 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
春节联欢会策划方案
2014/05/16 职场文书
市场部岗位职责
2015/02/12 职场文书
观看建国大业观后感
2015/06/01 职场文书
MySQL数据管理操作示例讲解
2022/12/24 MySQL