Question

我在制作时遇到问题，如果单击按钮，则会隐藏一个表格，另一个表格会显示。

以下是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">

我使用table id =＆＃34; 1＆＃34;对于第一个表和表id =＆＃34; 2＆＃34;对于第二个，但这样做似乎带走了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
    })
})();

Answer 1

我会将所有表格设置为display:none;，然后使用jQuery Toggle Class将重写的“可见”类添加到当前表中。

表切换器隐藏表

1 个答案: