繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个tab标签切换效果代码
- Javascript
- 在Z-Blog中运行代码[html][/html]（纯JS版）
- 统一接口：为FireFox添加IE的方法和属性的js代码
- 网页自动刷新，不产生嗒嗒声的一个解决方法
- 驱动事件的addEvent.js代码
- [原创]提供复制本站内容时出现,该文章转自IT学习网等字样的js代码
- CSDN轮换广告图片轮换效果
- 一段多浏览器的"复制到剪贴板"javascript代码
- Javascript中的常见排序算法
- JS Common 2 之比较常用到的函数
- 非正则实现的只能输入汉字的输入框
- CSDN上快速结贴的方法，JS实现
- js eval木马代码,以后再分析吧
- 屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
- 一个不错的可以检测多中浏览器的函数和其它功能
- 状态栏显示欢迎信息的脚本特效
- 关于文本限制字数的js代码
- 在你的网页中嵌入外部网页的方法
- 在IE中调用javascript打开Excel的代码(downmoon原作)
- javascript实现动态增加删除表格行(兼容IE/FF)
- javascript中获取选中对象的类型
Javascript 中的 一个tab标签切换效果代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 522 ::
收藏到网摘: n/a
网上比较流行的一种tab切换效果代码，主要是用于导航的一些栏目。 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>
截图和用到的两张图片：
评论 (0) All
