幻蓝博客 – 孤月蓝风

追寻互联网科技、Unity开发、AR/VR开发、游戏开发、Web前后端开发等技术。

jQuery选项卡切换


该代码通过jQuery实现了选项卡切换效果,很小巧,效果也很简单,但是一般来用足矣。

<script type="text/javascript">$(document).ready(function(){
        $(".tab_news li").each(function(){
            $(this).mouseover(function(){
                $(".tab").css("display","none");
                id_name = $(this).attr("id");
                id_len = id_name.length;
                id = id_name.substr(id_len-1,1);
                $("#tab"+id).css("display","block");
            });
        });
    });</script>
<div style="width:500px;height:30px;">
    <ul class="tab_news">
        <li id="tab_1">1</li>
        <li id="tab_2">2</li>
        <li id="tab_3">3</li>
    </ul>
</div>
<div class="tab" id="tab1" style="width:500px;height:200px;display:block;">
    111
</div>
<div class="tab" id="tab2" style="width:500px;height:200px;display:none;">
    222
</div>
<div class="tab" id="tab3" style="width:500px;height:200px;display:none;">
    333
</div>