Jquery 实现点击tab切换页签

Posted 2020-07-27 奈何缘浅丶世俗沾染了无奈

1.我将这个封装城了插件代码如下，你可以独立到一个js文件，然后页面引用下这个js文件：

(function ($) {
    $.fn.extend({
        qmTabs: function () {
            var aTabBodys = $(‘#tabs-body > div‘);
            $(this).children("li").each(function (index) {
                $(this).click(function () {
                    //alert(index);
                    $(this).removeClass().addClass(‘tab-nav-action‘).siblings().removeClass().addClass(‘tab-nav‘);
                    aTabBodys.hide().eq(index).show();
                });
            });
        }
    });
})(jQuery);

2.html页面代码：

<script src="~/Content/js/tab.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").qmTabs();
    });
</script>
<div class="tabs">
                                <ul id="tabs">
                                    <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: none"></div>
　　 <div style="display: none"></div>
　　 <div style="display: none"></div>
</div>

css样式：

.tabs {
    float: left;
    border-left: 1px solid #ccc;
}

    .tabs ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }

        .tabs ul li {
            float: left;
            line-height: 24px;
            margin: 0;
            padding: 2px 20px 0 15px;
        }

.tab-nav {
    border: 1px solid #ccc;
    border-left: 0px;
    cursor: pointer;
}

.tab-nav-action {
    color: #8bb521;
    border-top: 2px solid black;
    border-right: 1px solid #ccc;
    border-bottom: 0px;
    cursor: pointer;
    background-color: white;
}

.tabs-body {
    /*border-bottom: 1px solid #B4C9C6;
        border-left: 1px solid #B4C9C6;
        border-right: 1px solid #B4C9C6;*/
    float: left;
    padding: 5px 0 0;
    width: 100%;
}
 .tab_line {
        border-bottom: 1px solid #dbdbdb;
        height: 30px;
        margin-top: -3px;
        position: relative;
        top: 1px;
        width: 819px;
        z-index: 1;
    }
    /*.tabs-body div {
        padding: 10px;
    }*/