html - 按下按钮可切换表

Question

如何制作一个带有按钮的可切换表格，以导致另一个表格的不同 View ？像这样:

如您所见，单击按钮后，您会转到另一个表格列表。

这是一个基地:http://jsbin.com/agavid/136/edit

需要类似的东西。

Answer 1

您可以创建多个不同的表格，并使用简单的 JS/jQuery 脚本根据按下的按钮显示和隐藏表格。

基本上，您会在开始时显示所有表格(以逐步增强)，然后隐藏除第一个表格之外的所有表格。然后，当单击一个按钮时，隐藏所有表格并仅显示与该按钮关联的表格。

这是我正在谈论的演示。 http://jsfiddle.net/7Ywbn/2/

(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
})
})();

希望我正确理解了你的问题。