如何显示活动类数据onload？

问题描述：

I have two tabs in this code. Now, I want that when window load it shows active class data i.e. id="it_count" and after change tab then it will show related data to that tab i.e. id="non_it_count". So, How can I do this? Please help me.

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

答

Use descendent selector > and you are using the name of the id wrong. The id should be it_count non_it_count and not it_no and 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>

</div>

答

Try this

Perform an operation on click

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

</div>

如何显示活动类数据onload？

相关推荐