jQuery+CSS 가 구현 한 탭 효과 예제[테스트 사용 가능]

본 고의 실례 는 jQuery+CSS 가 실현 한 탭 효과 에 대해 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
CSS 코드:

#tabs{
  width:600px;
  height:250px;
  background:white;
  margin:20px;
}
#tabs ul{
  float:left;
  margin:20px 0 0 20px;
  padding:0;
}
#tabs li{
  width:80px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-bottom:1px solid grey;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  background:#eeeeee;
  position:relative;
  top:1px;
}
#tabs li:hover{
  color:#aaaaaa;
  cursor:pointer;
}
.items{
  width:560px;
  height:175px;
  font-size:16px;
  text-align:center;
  border:1px solid grey;
  float:left;
  margin-left:20px;
}

jQuery 코드:

$(document).ready(function(){
  $("li").bind("click",function(){
    $(".items").hide();
    $("#"+$(this).attr("name")).show();
    $("li").css({
      "border-top":"1px solid white",
      "border-left":"1px solid white",
      "border-right":"1px solid white",
      "border-bottom":"1px solid grey",
      "background":"#eeeeee"
    });
    $(this).css({
      "border-top":"1px solid grey",
      "border-left":"1px solid grey",
      "border-right":"1px solid grey",
      "border-bottom":"1px solid white",
      "background":"white"
    });
  });
  $("li:first-child").click();
});

HTML 부분 코드:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="tabs">
  <ul>
    <li name="lst1">  1</li>
    <li name="lst2">  2</li>
    <li name="lst3">  3</li>
    <li name="lst4">  4</li>
  </ul>
  <div class="items" id="lst1">  1</div>
  <div class="items" id="lst2">  2</div>
  <div class="items" id="lst3">  3</div>
  <div class="items" id="lst4">  4</div>
</div>

온라인 HTML/CSS/JavaScript 전단 코드 디 버 깅 실행 도 구 를 사용 합 니 다http://tools.jb51.net/code/WebCodeRun테스트 실행 효 과 는 다음 과 같 습 니 다.

관심 있 는 친 구 는 효과 가 어떤 지 시험 해 볼 수 있다.
PS:또는 상기 코드 를 완 성 된 HTML 페이지 로 조합 하여 온라인 HTML/CSS/JavaScript 코드 실행 도구:http://tools.jb51.net/code/HtmlJsRun실행 효 과 를 테스트 할 수 있 습 니 다.
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.