When loading page, open first tab with results

Question

When loading page, open first tab with results

Asked 5 years, 4 months ago

Viewed 38 times

1

I have five tabs, and each one displays or not the result of a query in the bank.

<div class="container">  
  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" class="nav-link" href="#basic">Basic</a>
    </li>
    <li class="nav-item">
     <a data-toggle="tab" class="nav-link" href="#gold">Gold></a>
    </li>
     .
     .
     .
</ul>

the basic tab is activated when you load the page:

 <script>
    $(document).ready(function(){
        $('a[href="#basic"]').tab('show');
    });
</script>

It happens that as each tab is the result of a query, it may occur that the "basic" tab does not contain any data to display, and the other yes.

I’m looking for a solution to display the first tab with result, by loading the page

NOTE: I use Listview to display the data.

What is the HTML of the tab?

– Sam

2019/02/27 at 20:24
<div class="tab-content"> <div id="basic" class="tab-pane fade in active">

– Daniel

2019/02/27 at 20:26
Try this: $(document).ready(function(){
 $('.tab-pane').each(function(){
 if($(this).children().length){
 $('a[href="#'+ this.id +'"]').tab('show');
 return false;
 }
 });
});

– Sam

2019/02/27 at 20:39
@Sam opened the tab "basic", which is the first one. In the test, this tab could not open, because it did not contain data of the query, and the others yes. Returned only the Listview <Emptydatatemplate> return message.

– Daniel

2019/02/27 at 20:44
Will checking whether it contains any text in the tab works?

– Sam

2019/02/27 at 20:45
i have these variables on the page that show whether or not the tab has data: <% Response.Write(Basic);%> and so on for each of the five tabs. I think these variables can help solve the problem.

– Daniel

2019/02/27 at 20:46
Let’s go continue this discussion in chat.

– Sam

2019/02/27 at 20:47

Show 2 more comments

1 answer

Browser other questions tagged javascript c# jquery

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-02-27T21:13:42+00:00

As discussed in the chat, just search the tabs for the first different value of 0 on the tag <sup>:

<li class="active"> 
   <a data-toggle="tab" class="nav-link" href="#basic">
      Basic <sup><% Response.Write(Basic);%></sup>
   </a> 
</li>

$(document).ready(function(){
   $('a[data-toggle=tab]').each(function(){
      if(Number($("sup", this).text())){
         $(this).tab('show');
         return false;
      }
   });
});