阿賈克斯數據到不同的標籤

我知道很多人會意識到這個例子。阿賈克斯數據到不同的標籤

<html> 
 
    <head> 
 
    <script> 
 
    function showUser(str) { 
 
     if (str == "") { 
 
      document.getElementById("txtHint").innerHTML = ""; 
 
      return; 
 
     } else { 
 
      if (window.XMLHttpRequest) { 
 
       // code for IE7+, Firefox, Chrome, Opera, Safari 
 
       xmlhttp = new XMLHttpRequest(); 
 
      } else { 
 
       // code for IE6, IE5 
 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 
      } 
 
      xmlhttp.onreadystatechange = function() { 
 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
 
       } 
 
      } 
 
// getuser.php is seprate php file. q is parameter 
 
      xmlhttp.open("GET","getuser.php?q="+str,true); 
 
      xmlhttp.send(); 
 
     } 
 
    } 
 
    </script> 
 
    </head> 
 
    <body> 
 

 
    <form> 
 
    <select name="users" onchange="showUser(this.value)"> 
 
     <option value="">Select a person:</option> 
 
     <option value="1">Peter Griffin</option> 
 
     <option value="2">Lois Griffin</option> 
 
     <option value="3">Joseph Swanson</option> 
 
     <option value="4">Glenn Quagmire</option> 
 
     </select> 
 
    </form> 
 
    <br> 
 
    <div id="txtHint"><b>Person info will be listed here...</b></div> 
 

 
    </body> 
 
    </html>

但是想象一下我在頁面上不同的標籤。裏面有不同的div txtHint變種，如txtHome，txtMenu1，txtMenu2等。點擊這些div應該通過javascript檢索各種php頁面，如"gethome.php?q="+str和"getmenu1.php?q="+str，同樣..然後怎麼做？請幫助

<ul class="nav nav-tabs"> 
 
<li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
 
<li><a data-toggle="tab" href="#menu1">Menu1</a></li> 
 
<li><a data-toggle="tab" href="#menu2">Menu2</a></li> 
 
<li><a data-toggle="tab" href="#menu3">Menu3</a></li> 
 
<li><a data-toggle="tab" href="#menu4">Menu4</a></li> 
 
</ul> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
<div class="tab-content"> 
 
<div id="home" class="tab-pane fade in active"> 
 
<h3>HOME</h3> 
 
<div id="txtHome"> 
 
</div> 
 
</div> 
 
<div id="menu1" class="tab-pane fade"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <h3>Menu1</h3> 
 
<div id="txtMenu1"> 
 
</div> 
 
</div> 
 
<div id="menu2" class="tab-pane fade"> \t \t \t \t \t <h3>Menu2</h3> 
 
<div id="txtMenu2"> 
 
</div> 
 
</div> 
 
<div id="menu3" class="tab-pane fade"> \t \t \t \t \t <h3>Menu3</h3> 
 
<div id="txtMenu3"> 
 
</div> 
 
</div> 
 
<div id="menu4" class="tab-pane fade"> \t \t \t \t \t <h3>Menu4</h3> 
 
<div id="txtMenu4"> 
 
</div> 
 
</div> 
 
</div>

來源

2016-07-11 Sachin Menon

<li><a data-toggle="tab" href="#menu1" onClick="getDataFor('txtMenu1','your_custom_data')">Menu1</a></li> 
<li><a data-toggle="tab" href="#menu2" onClick="getDataFor('txtMenu2','your_custom_data')">Menu2</a></li> 
<li><a data-toggle="tab" href="#menu3" onClick="getDataFor('txtMenu3','your_custom_data')">Menu3</a></li> 
<li><a data-toggle="tab" href="#menu4" onClick="getDataFor('txtMenu4','your_custom_data')">Menu4</a></li> 
div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <div id="txtHome"> </div> 
</div> 
<div id="menu1" class="tab-pane fade"> 
    <h3>Menu1</h3> 
    <div id="txtMenu1"> </div> 
</div> 
<div id="menu2" class="tab-pane fade"> 
    <h3>Menu2</h3> 
    <div id="txtMenu2"> </div> 
</div> 
<div id="menu3" class="tab-pane fade"> 
    <h3>Menu3</h3> 
    <div id="txtMenu3"> </div> 
</div> 
<div id="menu4" class="tab-pane fade"> 
    <h3>Menu4</h3> 
    <div id="txtMenu4"> </div> 
</div> 
</div> 
<script> 
    function getDataFor(tabId,dataId) { 

      var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById(tabId).innerHTML = xhttp.responseText; 
    } 
    }; 
    var url = "example.php?data="+dataId; 
    xhttp.open("GET",url, true); 
    xhttp.send(); 
    } 
    </script>

來源

2016-07-11 08:27:31

但如何將showUser溫控功能這裏面工作??? –

阿賈克斯數據到不同的標籤

回答

相關問題