> 웹 프론트엔드 > HTML 튜토리얼 > 超简单TAB切换_html/css_WEB-ITnose

超简单TAB切换_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:57:35
원래의
1448명이 탐색했습니다.

<div class="tab-fbox2"> <ul class="title-list2 clearfix"> <li class="active2">第一个</li> <li>第二个</li> <li>第三个</li> <li>第三个</li> </ul> <div class="tcont-box2"> <div class="tcont2" style="display:block;">第一个的内容</div> <div class="tcont2">第二个的内容</div> <div class="tcont2">第三个的内容</div> <div class="tcont2">第三个的内容</div> </div> </div>
로그인 후 복사

<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){ $('.tab-fbox2').on('mouseover', '.title-list2 li', function(e){ var index = $(this).index(); $(this).addClass('active2').siblings().removeClass('active2'); $(e.delegateTarget).find('.tcont2').eq(index).show().siblings().hide(); }); }); </script>
로그인 후 복사

style样式

.tab-fbox2{ width:500px; margin:20px 0 0 50px;}.tab-fbox2 .title-list2 li{ float:left; width:100px; height:20px; text-align:center; line-height:20px; background-color:#000; color:#fff; border-right:solid 2px #fff; cursor:pointer;}.tab-fbox2 .title-list2 li.active2{ background-color:#f00;}.tab-fbox2 .tcont-box2{ border:solid 1px #000; height:300px;}.tab-fbox2 .tcont-box2 .tcont2{ display:none;}
로그인 후 복사

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿