Jquery实现的Tabs页签

最新推荐文章于 2024-07-14 03:34:28 发布

李泽举

最新推荐文章于 2024-07-14 03:34:28 发布

阅读量549

点赞数 2

分类专栏：前端踩坑合集

本文链接：https://blog.csdn.net/weixin_45895806/article/details/112663933

版权

jQuery DOM操作导航切换 UI交互 JavaScript

关键词由CSDN通过智能技术生成

前端踩坑合集专栏收录该内容

99 篇文章 44 订阅

订阅专栏

效果

在这里插入图片描述

代码


<div class="tabs">
    <ul id="tabs">
        <li class="tab-nav">管理导航</li>
        <li class="tab-nav-action">系统设置</li>
        <li class="tab-nav">用户管理</li>
        <li class="tab-nav">内容管理</li>
        <li class="tab-nav">其他管理</li>
    </ul>
</div>
<div id="tabs-body" class="tabs-body">
    <div style="display:block">
    1111111
    </div>
    <div style="display:none">
    222222222
    </div>
    <div style="display:none">
    33333333333
    </div>
    <div style="display:none">
    4444444444
    </div>
    <div style="display:none">
    555555555555555
    </div>
</div>

样式就不贴了.

JQ代码

　　jquery代码

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs li").bind("click", function () {
            var index = $(this).index();
            var divs = $("#tabs-body > div");
            $(this).parent().children("li").attr("class", "tab-nav");//将所有选项置为未选中
            $(this).attr("class", "tab-nav-action"); //设置当前选中项为选中样式
            divs.hide();//隐藏所有选中项内容
            divs.eq(index).show(); //显示选中项对应内容
        });
 
    });
</script>