在HTML中创建选项卡 [英] Creating Tab in HTML
问题描述
我尝试在HTML中创建一个标签,其中包含垂直列中的4个标签,如以下 JSFiddle链接:
http:// HTML样本$ c>< div id =pensyarah-tab> 问题是我无法加载默认选项卡(tab0,其类别为活动)加载结果页面。 请注意,我删除了我的CSS文件中的Column部分和Column Navigation Part,所以我认为这个问题可能存在于我的在我的CSS文件的最底部标签部分或它存在于我的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 : HTML sample 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 这篇关于在HTML中创建选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
< 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> hey@me.com< / 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>
<$ 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 );
});
<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>hey@me.com</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>
$(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();
});