表切換器隱藏表

我遇到了麻煩，所以如果我點擊一個按鈕，一個表變得隱藏，另一個顯示。表切換器隱藏表

這裏是將DEMO

鏈路下面是代碼的主要位：

<div id="container">  
    <table id="1" div id="table3"> 
     <div class="table_2col"> 
      <div class="caption"> 
       <ul> 

      </div><!--/ column 3-->  
      <div class="clear"></div> 
     </div><!--/. table_3col--> 

     <div class="table_4col"> 
      <div class="caption">

我使用表ID =「1」爲第一個表和表ID =「2 「第二，但這樣做似乎帶走了CSS風格。

的CSS：

a.button{  
    color: white; 
    padding: 0.5rem; 
    border-radius: 5px; 
    text-decoration: none; 
    &:hover; 
} 
a.button:nth-child(1){ 
    background-color: #FA202B; 
}

的JavaScript：

(function() { 
    var tables = $("table"); 
    //Grabs all the tables 
    tables.hide().first().show(); 
    //Hides all the tables except first 
    $("a.button").on("click", function() { 
     //Adds eventListner to buttons 
     tables.hide(); 
     //Hides all the tables 
     var tableTarget = $(this).data("table"); 
     //Gets data# of button 
     $("table#" + tableTarget).show(); 
     //Shows the table with an id equal to data attr of the button 
    }) 
})();

來源

2014-03-12 user3404573

那個小提琴是可怕的和**真的很長的** ......沒有人會通讀整個事情。只需發佈重要的作品。另外，我沒有看到任何表格，並且image/css/js鏈接是相對的，這些不會在JSFiddle上運行。 – David

我會設置所有表display:none;，然後使用以壓倒一切的「可見」類添加到當前表。

來源

2014-03-12 21:37:33 APAD1

表切換器隱藏表

回答

相關問題