在HTML中创建选项卡 [英] Creating Tab in HTML

问题描述

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

http：//

HTML样本$ c>< 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>学术< / a>< / li>
< li>< a href =＃tab2>实验< / a>< / li>
< li>< a href =＃tab3>专业知识< / a>< / li>
< / ul>
< / div>
< / div>

< div class =tabcontainer>
<！ - - Tab0 - >
< div id =tab0class =tab active clear>
< table class =no-border fl_left>
< tr>
< td> Nama< / td>
< td>：< / td>
< td>这是名称< / td>
< / tr>
< tr>
< td> Akademik< / td>
< td>：< / td>
< td> PhD（ - ），BSc（ - ）< / td>
< / tr>
< tr>
< td> Jawatan< / td>
< td>：< / td>
< td>导演< / td>
< / tr>
< tr>
< td> Bidang Kajian< / td>
< td>：< / td>
< td>应用统计信息< / td>
< / tr>
< tr>
< td> Emel< / td>
< td>：< / td>
< td> [e-mail]< / 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 =tab1class =tab clear>
< h1> Dr Antimage< / h1>

< div id =content-pensyarah>

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

< tbody>
< tr>
< td> BSc（工业数学） - < / td>
< / tr>
< tr>
< td> PhD（数学） - < / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
<！ - Tab1 - >

<！ - - Tab2 - >
< div id =tab2class =tab clear>
< h1>古代医学博士< / h1>

< div id =content-pensyarah>

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

< tbody>
< tr>
< td> BSc（工业数学） - < / td>
< / tr>
< tr>
< td> PhD（数学）---< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
<！ - - Tab2 - >

<！ - - Tab3 - >
< div id =tab3class =tab clear>
< h1> Dr GG< / h1>

< div id =content-pensyarah>

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

< tbody>
< tr>
< td> BSc（工业数学）-0< / td>
< / tr>
< tr>
< td> PhD（数学）0-< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>

<！ - - Tab3 - >
< / div>< / div>

问题是我无法加载默认选项卡（tab0，其类别为活动）加载结果页面。

请注意，我删除了我的CSS文件中的Column部分和Column Navigation Part，所以我认为这个问题可能存在于我的在我的CSS文件的最底部标签部分或它存在于我的HTML文件中。

我非常感谢您的帮助。提前致谢。

解决方案

请尝试以下代码

 <$ c （'click'，function（e）{
 var currentAttrValue）$（$）$（document）.ready（function（）{
 $（'＃pensyarah-tab .tab-links a' = $（this）.attr（'href'）; 
 
 //显示/隐藏标签
 $（'＃pensyarah-tab'+ currentAttrValue）.show（）。siblings（） .hide（）; 
 
 //将当前选项卡更改为/激活
（this）.parent（'li'）。addClass（'active'）。siblings（）。removeClass （'active'）; 
 
 e.preventDefault（）; 
}）; 
 $（'＃pensyarah-tab .tab-links .active a'）。click ）; 
}）; 
  

演示

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>[e-mail]</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中创建选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！