Question

此代码中有两个tabs。现在，我希望在窗口加载时显示活动的类数据，即id="it_count"，在更改tab之后，它将显示与该选项卡相关的数据，即id="non_it_count"。那么，我该怎么做？请帮我。

<ul class="nav nav-tabs">
    <li class="active" id="it">
        <a data-toggle="tab" href="#home">IT Jobs</a>
    </li>
    <li id="non_it"><a data-toggle="tab" href="#menu1">Non IT Jobs</a></li>
    <li style="float:right;">
        <p id="it_count">Search Result Found <b style="color:red;">[ <?php echo $job_count_it; ?> ]</b></p>
        <p id="non_it_count">Search Result Found <b style="color:red;">[ <?php echo $job_count_non; ?> ]</b></p>
    </li>
</ul>

<script>
    $(document).ready(function(){
        if($(".nav-tabs li .it_no").hasClass('active')) 
        {
            $("#it_no").css("display","block");
            $("#non_it_no").css("display","none");
        }
        else 
        {
            $("#non_it_no").css("display","block");
            $("#it_no").css("display","none");
        }
    });
</script>

Answer 1

使用后代选择器>，并且您使用的ID名称错误。 id应该是 it_count non_it_count而非it_no和it_count_no

$(document).ready(function() {
  if ($("#it").hasClass('active')) {
    $("#it_count").css("display", "block");
    $("#non_it_count").css("display", "none");
  } else {
    $("#non_it_count").css("display", "block");
    $("#it_count").css("display", "none");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active" id="it">
    <a data-toggle="tab" href="#home">IT Jobs</a>
  </li>
  <li id="non_it"><a data-toggle="tab" href="#menu1">Non IT Jobs</a></li>
  <li style="float:right;">
    <p id="it_count">Search Result Found <b style="color:red;">[ <?php echo $job_count_it; ?> ]</b></p>
    <p id="non_it_count">Search Result Found <b style="color:red;">[ <?php echo $job_count_non; ?> ]</b></p>
  </li>
</ul>

Answer 2

尝试一下

执行点击操作

      $(document).ready(function(){
        $("#non_it_count").hide();
        
        $("#it").click(function(){
        $("#it_count").show();
        $("#non_it_count").hide();
        });
        
        $("#non_it").click(function(){
        $("#it_count").hide();
        $("#non_it_count").show();
        });
      });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul class="nav nav-tabs">
      <li class="active" id="it">
        <a data-toggle="tab" href="#home">IT Jobs</a>
      </li>
      <li id="non_it"><a data-toggle="tab" href="#menu1">Non IT Jobs</a></li>
      <li style="float:right;">
        <p id="it_count">Search Result Found 1 <b style="color:red;">[ <?php echo $job_count_it; ?> ]</b></p>
        <p id="non_it_count">Search Result Found  2<b style="color:red;">[ <?php echo $job_count_non; ?> ]</b></p>
      </li>
    </ul>

如何显示活动类的数据加载？

2 个答案: