Question

我想在点击其中一个链接时切换表格。如果我要单击另一个链接来切换另一个表，则已切换的上一个表应该隐藏。我有这样一个href：

  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><?php echo 'Welcome, '.$name; ?></a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#" class="toggle-link">President</a></li>
          <li><a href="#" class="toggle-link">Vice President</a></li>
          <li><a href="#" class="toggle-link">Secretary</a></li>
          <li><a href="#" class="toggle-link">Treasurer</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

我还有一个应该切换的数据表：

<div class="candidates" style="display: none">
<div class="container">
    <div class="page-header">
        <h3>President Lists:</h3>
    </div>
<form align="center" method = "post" action="processvote.php">
    <table class="table table-bordered table-responsive candidates">
        <thead>
            <tr>
                <th>Photo</th>
                <th>Name</th>
                <th>Partylist</th>
                <th>Position</th>                   
            </tr>
        </thead>

        <tbody>
            <tr>
                <?php
                $query_get_users = mysqli_query($conn, "SELECT * FROM tbl_users WHERE position = 'President'");
                while($row = mysqli_fetch_assoc($query_get_users)) {

                    $id = $row['id'];
                    $photo = $row['photo'];
                    $name = $row['name'];
                    $partylist = $row['partylist'];
                    $position = $row['position'];
                ?>
                <td><img src="<?php echo $upload_dir.$photo; ?>" height="40"></td>
                <td><input type="radio" value="<?php echo $id; ?>"> <?php echo $name; ?></td>
                <td><?php echo $partylist; ?></td>
                <td><?php echo $position; ?></td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
</div>
<br></br>
<td><center><input type="submit" name="vote" value="VOTE"></center></td>
</form>
</div>

<div class="candidates" style="display: none;">
<div class="container">
    <div class="page-header">
        <h3>Vice President Lists:</h3>
    </div>
<form align="center" method = "post" action="processvote.php">
    <table class="table table-bordered table-responsive candidates">
        <thead>
            <tr>
                <th>Photo</th>
                <th>Name</th>
                <th>Partylist</th>
                <th>Position</th>                   
            </tr>
        </thead>

        <tbody>
            <tr>
                <?php
                $query_get_users = mysqli_query($conn, "SELECT * FROM tbl_users WHERE position = 'Vice President'");
                while($row = mysqli_fetch_assoc($query_get_users)) {

                    $id = $row['id'];
                    $photo = $row['photo'];
                    $name = $row['name'];
                    $partylist = $row['partylist'];
                    $position = $row['position'];
                ?>
                <td><img src="<?php echo $upload_dir.$photo; ?>" height="40"></td>
                <td><input type="radio" value="<?php echo $id; ?>"> <?php echo $name; ?></td>
                <td><?php echo $partylist; ?></td>
                <td><?php echo $position; ?></td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
</div>
<br></br>
<td><center><input type="submit" name="vote" value="VOTE"></center></td>
</form>
</div>

例如，我要点击链接总统，它将切换表总统。如果我要点击副总统链接，副总裁表应该切换，总统表应该隐藏。我该如何实现呢？到目前为止，我试图在下面做一个jquery：

<script>
$(function() {

    $(document).on('click', 'a', function(event) {

        $(this).siblings().show();
        $(this).parent().siblings().each(function(index, element) {

            $(element).find('.candidates:visible').hide();
        })
    })
})
</script>

Answer 1

您必须在代码中执行以下三项更改： -

给你的表一个类或者像Id那样：

<div id="vicePresident" class="candidates" style="display: none;"> <div class="container"> <div class="page-header"> <h3>Vice President Lists:</h3> </div>

在导航中将这些新ID添加为自定义属性 data-tableid ：

<ul class="nav navbar-nav">
  <li><a href="#" data-tableid="tabPresident" class="toggle-link">President</a></li>
  <li><a href="#" data-tableid="tabVicePresident" class="toggle-link">Vice President</a></li>
  <li><a href="#" data-tableid="tabSecretary" class="toggle-link">Secretary</a></li>
  <li><a href="#" data-tableid="tabTreasurer" class="toggle-link">Treasurer</a></li>
</ul>

Javascript更改，更改点击处理程序以读取此data-tableid属性：

$(document).on('click', 'a', function(event) { //1. Hide all candidate class elements $(".candidates").hide(); //2. Show the candidate which is clicked based on the data-tableid var idOfTable = $(event.target).data("tableid"); $('#'+idOfTable).show(); })

在隐藏其他表

1 个答案: