I found a lot of jquery effects on the internet, and so I wrote one. Prevents the page from refreshing the tab switch,
HTML code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= ". /style/admin.css "rel=" stylesheet "type=" Text/css "/>"
<script type= "Text/javascript" src= "System/js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Tabs.js" ></script>
<style type= "Text/css" >
. tabs{List-style:none; width:400px; height:23px;}
. tabs a {display:block; float:left;padding:2px 3px; background: #eff7ff; text-decoration:none; margin-right:2px;}
. Tabs a.current{background: #a1c6de; color: #000;}
. tab{Display:block; width:400px height:300px; border:1px solid #ccc;
</style>
<body>
<div class= "Tabs" >
<a href= "#xiangmu" > Project information </a> <a href= "#kehu" > Customer </a><a href= "#wenda" > Job questions </a>
</div>
<div id= "Xiangmu" class= "tab" > Project information </div>
<div id= "Kehu" class= "tab" > Customer </div>
<div id= "Wenda" class= "tab" > Job Questions </div>
</body>
JS Code:
Copy Code code as follows:
$ (function () {
$ ("Div.tab"). Hide (); Hide All
$ ("Div.tabs A:first"). AddClass ("current"); The first element is selected
$ ("Div.tab:first"). Show (); The first content displays
$ ("Div.tabs a"). Click (function () {
$ ("Div.tabs a"). Removeclass ("current"); Remove all tabs from the current style
$ (". tab"). Hide (); Hide All
$ (this). AddClass ("current");
var Activetab = $ (this). attr ("href"); Get Div
$ (Activetab). Show ();
});
Gets the message passed from the URL.
var url = window.location.href;
var reg =/#.+/;
if (reg.test (URL)) {//contains #, defaults to only one #, multiple # situations are not considered
Hide All
$ ("Div.tabs a"). Removeclass ("current"); Remove all tabs from the current style
$ (". tab"). Hide (); Hide All
var href = url.split (' # ') [1];
$ ("Div.tabs [href=#" + href + "]"). AddClass ("current");
$ ("#" + href). Show ();
}
});
The code is very simple, the idea is very clear, but very practical,
For example, in the previous example, you refresh the page, you want to reposition to the second tab, just need to reassign Xxx.aspx#kehu
Attached screenshot
