CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui-tabs
Marla Tarrant
Marla Tarrant

Reputation: 29

Select default tab on page load

I would like the first tab to be 'selected' upon page load.

Hi, I would like the first tab, 'Discover', to be selected upon page load. I have run multiple versions of the same code functionality in Javascript and nothing seems to be working. I am wondering whether my code format in Javascript or HTML is correct.

I have used this as a reference: https://codepen.io/PeteTalksWeb/pen/vmyJBd

Any feedback or help on this subject would be much appreciated, thanks in advance. 

<div id="tabs" class="tabbable-line">
 <ul class="nav nav-tabs text-center">
  <li class="active">
   <a href="#tabs-1" data-toggle="tab">Discover</a>
  </li>
  <li>
   <a href="#tabs-2" data-toggle="tab">Planning</a>
  </li>
  <li>
   <a href="#tabs-3" data-toggle="tab">Marketing</a>
  </li>
  <li>
   <a href="#tabs-4" data-toggle="tab">Growth</a>
  </li>
 </ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-1.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-2">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-2.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-3">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-3.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-4">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-4.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

</div>
</div>
<div id="tabid"></div>

<script>
 $("#tabs").tabs({
 active: 0,
 activate: function (event, ui) {
 var active = $('#tabs').tabs('option', 'active');
 }
 });
</script>

I expected the tab/link to be selected upon page load, but the output instead was that the tab 'flashed' as if selected and faded shortly after.

EDIT I received this error: Uncaught TypeError: $(...).tabs is not a function What does this mean?

Upvotes: 0

Views: 1925

Answers (2)

Will
Will

Reputation: 389

I have taken your code and created a JSFiddle with it here.

Your code works fine and as you will see I have been sure to include both the the following resources;

Jquery itself - https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

Jquery UI - https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

In my example change the following;

active: 1,

to

active: 0,

and you will see that a different tab is selected.

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

The code snippet below shows that it is working fine. Please check the following:

  1. Your javascript is wrapped with a document.ready function: Either

$(function(){

or 

$(document).ready(function(){

(both work the same - see the below StackSnippet for how the first was used)

  1. You have included all necessary libraries (the CSS, the jQuery.js and the jQueryUI.js files) -- as in the below snippet. You can include these just as they are within the <head> tags of your page.

$(function(){
  $("#tabs").tabs({
    active: 0,
    activate: function (event, ui) {
      var active = $('#tabs').tabs('option', 'active');
    }
  });
}); //end document.ready
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="tabs" class="tabbable-line">
 <ul class="nav nav-tabs text-center">
  <li class="active">
   <a href="#tabs-1" data-toggle="tab">Discover</a>
  </li>
  <li>
   <a href="#tabs-2" data-toggle="tab">Planning</a>
  </li>
  <li>
   <a href="#tabs-3" data-toggle="tab">Marketing</a>
  </li>
  <li>
   <a href="#tabs-4" data-toggle="tab">Growth</a>
  </li>
 </ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-1.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-2">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-2.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-3">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-3.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-4">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-4.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

</div>
</div>
<div id="tabid"></div>
<script>
</script>

Upvotes: 0

Related Questions