标签不会在点击时切换

Question

我有两个标签 review 和 highlights。当网站加载时，高亮选项卡默认处于活动状态或已单击，但其上显示的数据为highlights 和reviews。当我单击reviews 选项卡时，两个选项卡的数据相同。我在我的代码中做错了什么，所以它在每个评论和突出显示选项卡中显示两个选项卡的数据，而不是只显示各自的数据？

我的代码：

<?php
echo " <div class='nav nav-tabs' id='nav-tab' role='tablist'>";
    echo "<a class='nav-link active' id='nav-highlights-tab' data-toggle='tab' href='#nav-highlights' role='tab' aria-controls='nav-highlights' aria-selected='true'>Highlights</a>";
    echo "<a class='nav-link' id='nav-review-tab' data-toggle='tab' href='#nav-reviews' role='tab' aria-controls='nav-reviews' aria-selected='false'>Reviews</a>";
    echo "</div>";
    echo "</nav>";
    echo "<div class='tab-content' id='nav-tabContent'>";
    echo "<div class='tab-pane fade show active' id='nav-highlights' role='tabpanel' aria-labelledby='nav-highlights-tab'>";
    /// getRestaurantHighlights($result['res_id']) .
    echo "<p>highlights</p>";

    "</div>";
    echo "<div class='tab-pane fade' id='nav-reviews' role='tabpanel' aria-labelledby='nav-reviews-tab'>";
    //getRestaurantReviews($result['res_id']) .
    echo "<p>reviews</p>";
    "</div>";

    echo "</div>";
    echo "</div>";
    echo "</div>";
    echo "</div>";


echo "<script>

$(document).ready(function () {
    $('#searchAnything').on('keyup', function () {
      var value = $(this).val().toLowerCase();
      $('#myDIV *').filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });

</script>";
?>

Answer 1

为了你更好的工作......

不要过多使用echo..

echo 仅在 php 函数 和 变量 上使用，但绝对不能在 html 标签上使用

<nav>
  <div class='nav nav-tabs' id='nav-tab' role='tablist'>
   <a class='nav-link active' id='nav-highlights-tab' data-toggle='tab' href='#nav-highlights' role='tab' aria-controls='nav-highlights' aria-selected='true'>Highlights</a>
  <a class='nav-link' id='nav-review-tab' data-toggle='tab' href='#nav-reviews' role='tab' aria-controls='nav-reviews' aria-selected='false'>Reviews</a>
 </div>
</nav>

<div class='tab-content' id='nav-tabContent'>

    <div class='tab-pane fade show active' id='nav-highlights' role='tabpanel' aria-labelledby='nav-highlights-tab'>

          <div class='tab-pane fade' id='nav-reviews' role='tabpanel' aria-labelledby='nav-reviews-tab'>
<?php echo getRestaurantReviews($result['res_id']);  ?>  
     </div>

     <p>reviews</p>