A tab label switching effect code_extjs

HTML:

Copy code The code is as follows:

• < ;a title="Latest updates">Latest updates


• < ;a title="Corporate News">Corporate News


• < ;a title="Industry News">Industry News


• < ;a title="Column Article">Column Article


• < ;a title="Technology News">Technology News

< ;/div>

CSS:

Copy code The code is as follows:

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

Copy code The code is as follows:

Screenshots and two pictures used: