지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Juery 웹 탭으로 code_jquery 구현

Juery 웹 탭으로 code_jquery 구현

WBOY
풀어 주다： 2016-05-16 18:06:06
원래의
1009명이 탐색했습니다.

먼저 프론트엔드 코드

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

< ;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{ 디스플레이: 없음;}
    관련 라벨：
    网页选项卡
    원천：php.cn
    이전 기사：Javascript 시리즈 데이터 유형 string_javascript 기술에 능숙함 다음 기사：자바스크립트 마스터하기 시리즈 - 자바스크립트 기초_자바스크립트 기술
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
    에서 2024-04-06 19:13:16
    0
    2
    476
    Reactjs에서 여러 확인란을 선택하는 방법 여러 개의 확인란을 선택하고 싶지만 그렇게 할 수 없는 옵션 목록이 있습니다. 이 코드에 어떤 문제가 있습니까? 샌드박스 URL
    에서 2024-04-06 18:55:21
    0
    1
    396
    window.open() 및 data: 구성표를 사용하여 계산 문서 열기 새 브라우저 탭에서 열려는 계산된 HTML 문서를 생성하는 브라우저에서 실행되는 웹 페이지가 있습니다. 간단하고 지저분한 방법은 다음과 같이 하는 것입니다: co...
    에서 2024-04-06 15:06:34
    0
    1
    378
    vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
    에서 2024-04-06 11:35:59
    0
    1
    456
    Gmail 및 XOAUTH2를 사용하는 PHPMailer: 현재 새로 고침 토큰이 만료되면 자동으로 새 새로 고침 토큰을 얻는 방법은 무엇입니까? XOAUTH2(PHPMailerWiki)와 함께 Gmail을 사용하는 것과 GmailXOAUTH2와 함께 PHPMailer를 사용하여 이메일을 보내는 방법이 걱정...
    에서 2024-04-06 10:14:45
    0
    1
    373
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿