1. I will this package city plug-in code as follows, you can separate to a JS file, and then the page refers to the next JS file:
(function ($) {$.fn.extend ({qmtabs:function () {) {varAtabbodys = $ ('#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 page Code:
<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" > Last one months order </li>
<li class= "Tab-nav" > One months ago Order </li>
<li class= "Tab-nav" > Cancelled orders </li>
<li class= "Tab-nav" > Exchange Order </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 style:
. 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 20px015px; }.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:5px0 0; Width: -%;} . 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; }*/
Jquery implementation Click tab to switch tabs