Question

如何用jquery实现tab切换

Answer 1

<style>
.box{width:300px;height:300px;}
.box span{display:block;float:left;width:100px;height:30px;text-align:center;line-height:30px;}
.box ul{width:300px;}
.box ul li{display:none;}
</style>
<div class="box">
    <span>第1个</span><span>第2个</span><span>第3个</span>
    <ul>
        <li>显示第一个</li>
        <li>显示第二个</li>
        <li>显示第三个</li>
    </ul>
</div>

<script type="text/javascript">
$(function(){
    $(".box ul li").eq(0).show();
    $(".box span").click(function(){
        var ind = $(".box span").index(this);
        $(".box ul li").hide();
        $(".box ul li").eq(ind).show();
    })
})
</script>