Question

我知道很多人会知道这个例子。

＆＃13;

<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>

＆＃13;

但想象一下，我在页面上有不同的标签。里面有div txtHint的不同变体，如txtHome，txtMenu1，txtMenu2等。点击这些div应该通过javascript检索各种php页面，例如"gethome.php?q="+str和"getmenu1.php?q="+str等等..然后怎么做？？请帮忙

＆＃13;

<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>
											
<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>

＆＃13;

Answer 1

<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>

将ajax数据导入不同的标签

1 个答案: