在隐藏其他 table 的同时切换单个 table

Question

我想在单击 link 之一时切换 table。如果我要单击另一个 link 来切换另一个 table，则之前已切换的 table 应该隐藏。我有这样的 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>

我还有下面的数据 tables 应该切换：

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

例如，我要单击 link 总统它将切换 table 总统。如果我要单击 副总统 link，副总统的 table 应该切换，总统 table 应该隐藏。我该如何实施？到目前为止，我已经尝试在下面做一个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

您必须在代码中进行以下三处更改：-

给你的桌子一个 class 或者我喜欢 :

<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 属性：

$(文档).on('click', 'a', 函数(事件) { //1。隐藏所有候选 class 元素 $(".candidates").hide();<br> //2。根据data-tableid显示被点击的candidate var idOfTable = $(event.target).data("tableid"); $('#'+idOfTable).show(); })

在隐藏其他 table 的同时切换单个 table

Toggle a single table while hiding other tables

html

javascript

jquery

toggle