Dynamic Ajax loading on the bootstrap tab page

To implement this function, click the tab and navigate to Ajax to dynamically load the page. After loading the page, click the button and the page will not be reloaded. The previously loaded page will be displayed directly.

Tab Page code:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="maintab">
  <li class="active"><a href="#tab1"  onclick=‘showPage("tab1","tab1.php")‘>tab1</a></li>
  <li><a href="#tab2" onclick=‘showPage("tab2","tab2.php")‘>tab2</a></li>
  <li><a href="#tab3" onclick=‘showPage("tab3","tab3.php")‘>tab3</a></li>
  <li><a href="#tab4" onclick=‘showPage("tab4","tab4.php")‘>tab4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1"></div>
  <div class="tab-pane" id="tab2"></div>
  <div class="tab-pane" id="tab3"></div>
  <div class="tab-pane" id="tab4"></div>
</div>

Javascript:

<Script language = "JavaScript">
VaR loadimg = "./img/load2.gif"; // loading image during loading

Function showpage (Tabid, URL ){
$ ('# Maintab A [href = "#' + Tabid + '"]'). tab ('show '); // display the clicked tab page
If((('{'{tabid}.html (). Length <20) {// Ajax loads a new page when the content of the tab page is smaller than 20 bytes
Upload ('users' tabid).html ('<br>' + loadimg + 'loading page, please wait...'); // set the loading image during page loading
$ ('#' + Tabid). Load (URL); // load the page using Ajax
}
}

</SCRIPT>

This article is from the "little he Beibei's technical space" blog, please be sure to keep this http://babyhe.blog.51cto.com/1104064/1539694