如何用jquery写tab页切换

Answer 1

<style type="text/css">
    .tab{width:300px;height:200px;border:1px solid #666}
    .btn span{display:block; width:100px; float:left; text-align:center}
    .btn span.select{background: #377bee; color: #fff}
    .clear{clear:both;}
    .switch ul{display: none}
    .switch .block{display: block}
</style>
<div class="tab">
    <div class="btn">
        <span class="select">111</span>
        <span>222</span>
        <span>333</span>
        <div class="clear"></div>
    </div>
    <div class="switch">
        <ul class="block">
            <li>11111111111111</li>
            <li>11111111111111</li>
            <li>11111111111111</li>
            <li>11111111111111</li>
            <li>11111111111111</li>
        </ul>
        <ul>
            <li>22222222222222</li>
            <li>22222222222222</li>
            <li>22222222222222</li>
            <li>22222222222222</li>
            <li>22222222222222</li>
        </ul>
        <ul>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
            <li>33333333333333</li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="./js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
    $(function(){
        // 如果需要点击切换，将 mouseover 换成 click
        $('.btn span').mouseover(function(){
            $(this).siblings('span').removeClass('select');
            $(".switch ul").eq($(this).addClass('select').index()).addClass('block').siblings('ul').removeClass('block');
        })
    })
</script>

Answer 2

可以简单地用class样式来控制 ，到时候来控制class的添加或remove