jquery 选项卡切换

最新推荐文章于 2025-07-01 13:43:14 发布

原创最新推荐文章于 2025-07-01 13:43:14 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #选项卡 #切换

页面效果专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单选项卡插件，通过点击不同的菜单项来切换显示的内容区域。该插件利用了jQuery的选择器和事件处理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <script src="js/jquery.js"></script>
    <style> 
    .div{width:60px;height:30px;float:left;cursor:pointer;background:lightgreen;line-height:30px;}  
    .tab_box , .tab_box>div{width:180px;height:300px;border:1px solid lightblue;}
</style>  
<div>  
    <div class="tab_menu">  
        <div class="div">菜单一</div>  
        <div class="div">菜单二</div>  
        <div class="div">菜单三</div>  
    </div>  
    <div class="tab_box">  
        <div>1111111111</div>  
        <div  style="display:none;">22222222</div>  
        <div  style="display:none;">33333333</div>  
    </div>  
</div>  
<script>
    $('.tab_menu').children().click(function () {
        var id = $(this).index();   //当前操作的元素索引值  
        $('.tab_box').children().eq(id).show().siblings().hide();   //当前显示，其他的隐藏。  
    });
</script>