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; }*/
时间: 2024-10-28 15:50:41