Question

好的，所以当我单击用户名按钮时，我试图使用ajax在同一页面上提取用户信息。（是的，我有点像Ajax / javascript部门的菜鸟）。但是，我想为用户创建选项卡，其中将填充特定的用户信息。我遇到的麻烦是，当我单击一个用户按钮时，所有选项卡都开始关闭。我不知道如何默认情况下打开第一个选项卡。我觉得这应该超级简单，但我没有看到。这是我到目前为止的内容：

testpage.php

<?php include("settings.php");
include("header.php"); 
include("func.php"); ?>

<button onclick="showUser(1)">User 1 </button><br>
<button onclick="showUser(2)">User 2 </button><br>
<button onclick="showUser(3)">User 3 </button>
<br><br>

<div id="txtHint">Placeholder Content</div>

<?php include("footer.php"); ?>

getuser.php

<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>


<?php
$q = intval($_GET['q']); 

include("settings.php");
include("func.php");
if (!$connect) {
    die('Could not connect: ' . mysqli_error($connect));
}
?>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <p>
      <?php
        mysqli_select_db($connect,"ajax_demo");
        $sql="SELECT * FROM charge WHERE charge_tenant = '".$q."'";
        $result = mysqli_query($connect,$sql);
              echo "<table>
                    <tr>
                    <th>Original Amount</th>
                    <th>Amount Paid</th>
                    <th>Open Balance</th>
                    </tr>";
                    while($row = mysqli_fetch_array($result)) {
                        echo "<tr>";
                        echo "<td>" . moneyformat($row['charge_amount']) . "</td>";
                        echo "<td>" . moneyformat($row['charge_paid']) . "</td>";
                        echo "<td>" . moneyformat($row['charge_unpaid']) . "</td>";
                        echo "</tr>";
                    }
                    echo "</table>";
                    mysqli_close($connect);
        ?><script>document.getElementById("defaultOpen").click();</script>
  </p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

func.php

<?php
<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 (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

我相信问题可能出在<script>document.getElementById("defaultOpen").click();</script>的位置，但是我不知道还有什么地方可以使它起作用...

EDIT

因此，经过数小时的努力，我终于弄明白了。这非常简单。在我的getuser.php页面上，我只是将<div id="London" class="tabcontent">更改为<div id="London" class="tabcontent" style="display:block">。我现在觉得很傻，但是希望这对以后的人有所帮助。

在标签内使用Ajax查询时，请保持html标签处于打开状态

0 个答案: