HTML:
复制代码 代码如下:
<div>
<div id="tabsK">
<ul id="menu4">
<li><a title="最新更新"><span>最新更新</span></a></li>
<li><a title="企业新闻"><span>企业新闻</span></a></li>
<li><a title="行业新闻"><span>行业新闻</span></a></li>
<li><a title="专栏文章"><span>专栏文章</span></a></li>
<li><a title="科技新闻"><span>科技新闻</span></a></li>
</ul>
</div>
<div id="main4">
<ul></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"><></script>
截图和用到的两张图片：
【一个tab标签切换效果代码】相关文章：
★ jQuery插件Slider Revolution实现响应动画滑动图片切换效果
★ 鼠标图片振动代码
★ 链接渐变效果