異なるタブにajaxデータを入力

私は多くの人がこの例を知っていることを知っています。異なるタブにajaxデータを入力

<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のようなtxtHint、txtMenu1、txtMenu2などのさまざまなバリエーションがあります。これらのdivをクリックすると、"gethome.php?q="+strや"getmenu1.php?q="+strなどのjavascriptを使用してさまざまなPHPページを取得する必要があります。

<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のfucntion内部の意志を助けてください？ –

異なるタブにajaxデータを入力

答えて

関連する問題