在不同的点击上显示两个不同的表

Question

所以我正在为一个运动队创建网站。我有一个 "Results" 页面，他们每轮的分数将以 table 的形式发布。在 table 上方，我需要有两个选项，一个是 "Season 2014/2015"，另一个是 "Season 2015/2016"，我想为每个选项显示两个不同的 table？我该怎么做？

Answer 1

如果您使用的是 bootstrap，您可以查看选项卡：http://getbootstrap.com/javascript/#tabs

将您的表格放在 2014/2015 选项卡中，将其他表格放在 2015/2016 选项卡中

Answer 2

你可以通过简单地使用jquery.Here来做到这一点是一个例子。

HTML

<div id="foo">
        <span id="table1-btn">Table 1</span>
        <span id="table2-btn">Table 2</span>
    </div>
    <table id="table1">
        <tr>
            <td>Table 1</td><td>Table 1</td>
        </tr>
        <tr>
            <td>Table 1</td><td>Table 1</td>
        </tr>
    </table>
    <table id="table2">
        <tr>
            <td>Table 2</td><td>Table 2</td>
        </tr>
        <tr>
            <td>Table 2</td><td>Table 2</td>
        </tr>
    </table>

css

#foo{
    width:200px;
    height:auto;
    padding:5px;
}
#table1-btn,
#table2-btn{
    width:100px;
    height:auto;
    padding:5px;
    background-color:#e3e3e3;
    cursor:pointer;
}

jQuery

$(document).ready(function () {
    $('#table2').hide();

    $('#table1-btn').click(function () {
       $('#table2').hide();
       $('#table1').show();
    });
    $('#table2-btn').click(function () {
       $('#table1').hide();
       $('#table2').show();
    });
});

查找jsfiddle代码Here

在不同的点击上显示两个不同的表

Displaying two different tables on different click

frontend

web