In order to do this, in addition to jquery library and idTabs plug-ins, we also need to download a plug-in used to engage in URL: jquery. url. js, portal: https://github.com/allmarkedup/jQuery-URL-Parser
(The above link may be incorrect. If it cannot be used, you can download it here)
Idtabs package download http://www.jb51.net/jiaoben/43086.html
The HTML code of the Tab menu is written in this way. The div of each tab is handled by itself, and the page is wasted without being sent:
Copy codeThe Code is as follows:
<Div class = "tabmenu">
<Ul>
<Li> <a href = "# idTab1"> Dashboard </a> </li>
<Li> <a href = "# idTab2"> Tracker </a> </li>
<Li> <a href = "# idTab3"> Documents </a> </li>
<Li> <a href = "# idTab4"> Collaboration </a> </li>
<Li> <a href = "# idTab5"> Knowledge Mapping </a> </li>
</Ul>
</Div>
Note: Do not add class = "idTabs" to ul, that is, do not use javascript-free writing on SunSean's official website.
Write the script as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
Var tabToSelect = jQuery. url. param ("tab ");
If (null = tabToSelect | "" = tabToSelect ){
// Alert ("Parameter 'tab 'is null or empty \ nAuto selecting idTab1 ");
TabToSelect = "idTab1 ";
}
// Alert ("Selecting:" + tabToSelect );
$ (". Tabmenu ul"). idTabs (tabToSelect );
});
</Script>
There is a picture with the truth: