php tab效果代码,一个tab标签切换效果代码_extjs

HTML:

#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:

截图和用到的两张图片：

相关标签：tab 标签

本文原创发布php中文网，转载请注明出处，感谢您的尊重！