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:

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn