2.
3. 템플릿 코드:
1. 마우스 오버 시 배경색 추가
CSS Code클립보드에 콘텐츠 복사
.service-tabs li a{
너비 : 160px;height:
80px;
display
:block
;
color:#666;font-size:
32px;}
.service-tabs1 li a:hover{color:#2CC185;}
: #fff;} /*배경*/
2. 작은 삼각형, 당연함
CSS 코드
클립보드에 콘텐츠 복사
.service-tabs4 li{position:
relative;}
- .service -tabs4 li a:hover{
color:#2CC185;}
- .service -tabs4 li.on a{
background-color:#2CC185;color
: #fff- ; }
.service-tabs4 li i{width:11px; height
: 7px- ;
position:absolute;bottombottom:-6px ;왼쪽 :76px; background:url(images/arrow.png) ;display 3. 밑줄 CSS Code콘텐츠를 클립보드에 복사
.service -tabs2 li a:hover{color:#2CC185;}
.service-tabs2 li.on a{
height
:78px;
border-bottom:
2px
solid
#2CC185;color:#2CC185
;}
- 4. 스크립트 구현
JavaScript 코드콘텐츠를 클립보드에 복사 $(
function (){ $(
".service-tabs ul li").click(
function
() { $(this).addClass(
"on") .siblings().removeClass(
"on"); }); })
은 간단하고 실용적이어서 누구나 배울 수 있습니다. 서둘러 손을 더럽히십시오.
관련 권장 사항: html img 태그 사용 방법
HTML5 새 태그
html 일반적으로 사용되는 형식 표시 태그
위 내용은 HTML에서 탭바를 구현하는 여러 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명:본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.