如何對應的L1標籤相關的數據僅

Question

我<ul>標籤有兩個<li>選項，在每個點擊我需要證明與該相應的數據僅

這是我的計劃

<div id="divforhistoricresults" class="classhistoricaldataresults"> 
    <div class="list-container-2"> 
     <ul class="tabs-2 clearfix"> 
     <li><a href="#one">Data</a></li> 
     <li><a href="#two">Chart</a></li> 
     </ul> 
    </div> 
    <div class="tab-container-2"> 
     <table id="one" class="tab-content-1 table table-striped"> 
     </table> 
     <table id="two" class="tab-content-1 table table-striped">       
     </table> 
    </div> 
</div> 


$(document).ready(function() {}); 
$("ul.tabs-2 li").click(function() 
{ 
    var tabclicked = $(this).find("a").attr("href"); 
    if (tabclicked === '#one') 
    { 
     var onehtml = '<thead><th>ONE</th>'; 
     $("#one").html(onehtml); 
    // $("#two").hide(); 
    } 
    else if (tabclicked === '#two') 
    { 
     var twohtml = '<thead><th>TWO</th>'; 
     $("#two").html(twohtml); 
     // $("#one").hide(); 
    } 
}); 

的我面臨的問題是，兩者都可見？並且是否有可能使表id="one"默認顯示？

你能告訴我如何解決上述問題

這是我的小提琴

http://jsfiddle.net/jq4f69cz/4/

Answer 1

Updated fiddle。

追加HTML並取消hide()方法之前添加show()方法：

$("#one").show().html(onehtml); 
$("#two").show().html(onehtml); 

要顯示以下的事件發生後行一個默認地址：

$('ul.tabs-2 li:eq(0)').click(); 

希望這有助於。

---

$("ul.tabs-2 li").click(function() 
 
{ 
 
\t var tabclicked = $(this).find("a").attr("href"); 
 
\t if (tabclicked === '#one') 
 
\t { 
 
\t  var onehtml = '<thead><th>ONE</th>'; 
 
\t  $("#one").show().html(onehtml); 
 
      $("#two").hide(); 
 
\t } 
 
\t else if (tabclicked === '#two') 
 
\t { 
 
\t  var twohtml = '<thead><th>TWO</th>'; 
 
\t  $("#two").show().html(twohtml); 
 
      $("#one").hide(); 
 
\t } 
 
}); 
 

 
$('ul.tabs-2 li:eq(0)').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divforhistoricresults" class="classhistoricaldataresults"> 
 
    <div class="list-container-2"> 
 
     <ul class="tabs-2 clearfix"> 
 
     <li><a href="#one">Data</a></li> 
 
     <li><a href="#two">Chart</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="tab-container-2"> 
 
     <table id="one" class="tab-content-1 table table-striped"> 
 
     </table> 
 
     <table id="two" class="tab-content-1 table table-striped">       
 
     </table> 
 
    </div> 
 
</div>