一个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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
浅析javascript中的DOM
Mar 01 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
关于JS中prototype的理解
Sep 07 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
React事件处理的机制及原理
Dec 03 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
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获取MSN好友列表类的实现代码
2013/06/23 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python自动裁剪图像代码分享
2017/11/25 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
决心书范文
2014/03/11 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
见习报告格式范文
2014/11/08 职场文书
齐云山导游词
2015/02/06 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
关于做家务的心得体会
2016/01/23 职场文书
餐厅开业活动方案
2019/07/08 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python