집 > 기사 > 웹 프론트엔드 > jQuery는 몇 줄의 code_jquery로 탭 전환을 구현합니다.

jQuery는 몇 줄의 code_jquery로 탭 전환을 구현합니다.

WBOY원래의: 2016-05-16 16:10:251174검색

오늘 갑자기 기분이 좋아져서 탭 효과를 얻는 아주 간단한 방법이 생각났습니다

사실 논리는 아주 간단하지만 기본적으로 인터넷에는 이렇게 쓰여있지 않습니다

실제 적용에 문제가 있을지 모르겠지만 조언 부탁드립니다

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

jQuery 단순 탭
<스타일>
*{여백:0;}
몸, ul, 리 {
여백:0;
패딩:0;
}
몸 {
글꼴:12px/1.5 Tahoma;
}
#외부 {
너비:450px;
여백: 10px 자동;
}
#탭 {
오버플로:숨김;
확대/축소:1;
배경:#000;
테두리:1px 실선 #000;
}
#탭리 {
부동:왼쪽;
색상:#fff;
높이:30px;
커서:포인터;
줄 높이:30px;
목록 스타일 유형:없음;
패딩:0 20px;
}
#tab li.current {
색상:#000;
배경:#ccc;
}
#컨텐츠 {
테두리:1px 실선 #000;
테두리 상단 너비:0;
}
#content ul {
줄 높이:25px;
표시:없음;
여백:0 30px;
패딩:10px 0;
}