CODEWITHSUNDEEP
jqueryhtmlcss
Insidious.C
Insidious.C

Reputation: 15

Creating Tab in HTML

I am trying to create a tab in HTML that consists of 4 tabs in a verticle column as shown in the following JSFiddle link :

http://jsfiddle.net/DDV98/54/

HTML sample

<div id="pensyarah-tab">
<div id="column">
<div class="subnav">
<ul class="tab-links">
        <li class="active"><a href="#tab0">Biodata</a></li>
        <li><a href="#tab1">Academic</a></li>
        <li><a href="#tab2">Experiment</a></li>
        <li><a href="#tab3">Expertise</a></li>
</ul>
</div>
</div>

<div class="tabcontainer">
          <!-- Tab0 -->
        <div id="tab0" class="tab active clear">
        <table class="no-border fl_left">
        <tr>
          <td>Nama</td>
          <td>:</td>
          <td>This is name</td>
        </tr>
        <tr>
          <td>Akademik</td>
          <td>:</td>
          <td>PhD ( -- ), BSc ( -- )</td>
        </tr>
        <tr>
          <td>Jawatan</td>
          <td>:</td>
          <td>Director</td>
        </tr>
        <tr>
          <td>Bidang Kajian</td>
          <td>:</td>
          <td>Applied Statistics</td>
        </tr>
        <tr>
          <td>Emel</td>
          <td>:</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Ext</td>
          <td>:</td>
          <td>09 - 699 3154</td>
        </tr>
        <tr>
          <td>Bilik</td>
          <td>:</td>
          <td>D2-2-23</td>
        </tr>

      </table>    
      </div>         
      <!-- Tab0 -->

    <!-- Tab1 -->
      <div id="tab1" class="tab clear">
        <h1>Dr Antimage</h1>

        <div id="content-pensyarah"> 

            <table class="no-border fl_left">
              <thead>
              <tr>
                <th>Kelayakan Akademik</th>
              </tr>
              </thead>

              <tbody>
              <tr>
                <td>BSc ( Industrial Mathematics ) -- </td>
              </tr>
              <tr>
                <td>PhD ( Mathematics ) --</td>
              </tr>
              </tbody>
            </table>           
        </div>
      </div>
      <!-- Tab1 -->

      <!-- Tab2 -->
          <div id="tab2" class="tab clear">
        <h1>Dr Ancient Appiration</h1>

        <div id="content-pensyarah"> 

            <table class="no-border fl_left">
              <thead>
              <tr>
                <th>Kelayakan Akademik</th>
              </tr>
              </thead>

              <tbody>
              <tr>
                <td>BSc ( Industrial Mathematics )-- </td>
              </tr>
              <tr>
                <td>PhD ( Mathematics ) ---</td>
              </tr>
              </tbody>
            </table>           
        </div>
      </div>
      <!-- Tab2 -->

    <!-- Tab3 -->
          <div id="tab3" class="tab clear">
        <h1>Dr GG</h1>

        <div id="content-pensyarah"> 

            <table class="no-border fl_left">
              <thead>
              <tr>
                <th>Kelayakan Akademik</th>
              </tr>
              </thead>

              <tbody>
              <tr>
                <td>BSc ( Industrial Mathematics ) -0 </td>
              </tr>
              <tr>
                <td>PhD ( Mathematics ) 0-</td>
              </tr>
              </tbody>
            </table>           
        </div>
      </div>

      <!-- Tab3 -->
</div></div>

The problem is that I am unable to load the default tab (tab0 which has the class active) when the result page loads.

Please take note that I have deleted the Column part and Column Navigation Part in my CSS file, so I think that the problem may either exists in my Tabs part at the most bottom of my CSS file or it exists within my HTML file.

I greatly appreciate your help. Thanks in advance.

Upvotes: 0

Views: 413

Answers (4)

Krishanu Dey
Krishanu Dey

Reputation: 6406

Try the following code

$(document).ready(function () {
    $('#pensyarah-tab .tab-links a').on('click', function (e) {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('#pensyarah-tab ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
    $('#pensyarah-tab .tab-links .active a').click();
});

Demo

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20626

Check this Working Fiddle.

$(document).ready(function() {

    $('#pensyarah-tab .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('#pensyarah-tab ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
    $('.tab-links a:first').click();
});

You need to set the tab as active on DOM ready. The above example works.

With a:first, it selects first anchor tag, and your click function handles the rest.

Or

Add this in your CSS.

.tabcontainer .active {
    display:block;
}

Not

.tabcontainer .tabs .active {
    display:block;
}

Upvotes: 0

Anand
Anand

Reputation: 165

you have :

.tabcontainer .tab .active {
            display:block;
        }

change it to :

.tabcontainer .active {
            display:block;
  }

Upvotes: 1

Arseni Mourzenko
Arseni Mourzenko

Reputation: 52311

You have display: none; in .tabcontainer .tab, so every tab container is originally hidden.

You may do one of the following:

  • Show one within the $(document).ready,

  • Add display: block; to .active class and use the active class inside your JavaScript code, instead of showing and hiding the elements,

  • Or simulate a click on the first tab.

Upvotes: 0

Related Questions