在HTML中创建选项卡

本文介绍了在HTML中创建选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试在HTML中创建一个标签，其中包含垂直列中的4个标签，如以下：

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.

解决方案

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

这篇关于在HTML中创建选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

BSC