탭 라벨 전환 효과 code_extjs

HTML:

코드 복사 코드는 다음과 같습니다.

• < ;a title="최신 업데이트">최신 업데이트


• 기업 뉴스


• < ;a title="산업 뉴스">산업 뉴스


• 열 기사


• < ; a title="기술 뉴스">기술 뉴스

>

div>


CSS:

코드 복사

코드는 다음과 같습니다. #tabsK { float:left; width:100%;

line-height:normal

border-bottom:1px solid
}
# tabsK ul {
여백:0;
padding:10px 10px 0 10px;
list-style:none
}
#tabsK li {
display:inline; > 여백:0;
패딩:0;
커서:포인터;
}
#tabsK a {
float:left; " ) 반복 없음 왼쪽 상단;
여백:0;
패딩:0 0 0 4px;
텍스트 장식:없음;
}
#tabsK 범위 {
float : 왼쪽;
display:block;
배경:url("image/tabrightK.gif") 오른쪽 상단
padding:#FFF; 🎜 >}

#tabsK a 범위 {float:none;}
/* IE5-Mac 해킹 종료 */
#tabsK a:hover 범위 {
cursor:pointer
색상:#FFF;
배경 위치:100% -42px;
}
#tabsK a:hover {
배경 위치:0% -42px
커서:포인터;
}
#tabsK .hover 범위
{
배경 위치:0% -42px
}
#tabsK .hover 범위
{
배경 위치 : 100% -42px
}

.tab2 ul
{
display:none
list-style-type:none; > }
.tab2 ul li
{
text-align:left;
line-height:20px
text-indent:1em;
.tab2 block
{
display:block;
}


JS:




코드 복사


코드는 다음과 같습니다.

사용된 스크린샷과 두 장의 사진:

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.