超簡單TAB切換

標籤：style   blog   color   io   java   ar   div   sp   cti   

<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;}

 

超簡單TAB切換