Juery 웹 탭으로 code_jquery 구현

먼저 프론트엔드 코드

코드를 복사하세요 코드는 다음과 같습니다.

< ;div class="tab"> ;

• 개인 정보
  
• 내 사진


• 내 블로그


;/div>

내 QQ:1511109272 ;/ div>

안녕하세요

안녕하세요

>< ;/div> 🎜> 코드는 다음과 같습니다.


$(function() {
//웹페이지 탭 전환
var $menu_li = $("div .tab_menu ul li");

$menu_li.click(function(){
$(this).addClass("selected") //현재

강조됨
.siblings().removeClass( "selected"); // 다른 피어의 강조 표시 제거

var index = $menu_li.index( $(this) ) //

의 하위 노드 인덱스 찾기 $("div.tab_box > div ") //인덱스 N이 있는 DIV가 표시됩니다 .eq(index).show() .siblings().hide() }) })

그런 다음 CCS 스타일을 설정할 수 있습니다.




코드 복사


코드는 다음과 같습니다. 다음과 같습니다:


.clear {clear:both; height:0px;overflow:hidden;}
.tab{width:400px;font-size:12px;}
.tab_menu ul{ 패딩:0px;마진:0px;}

.tab_menu li{ list-style:none; float:left;
배경:#C2CEFE;
여백: 0px 8px; 테두리:#86B4CA 1px 솔리드;

} .box{ 너비:400px; 높이: 200px; 테두리:#A8C9D9 1px 솔리드; 패딩:10px 8px; } .tab_menu ul li. selected{배경:#dadada; 커서:포인터; } .hide{ 디스플레이: 없음;}

성명：

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