按下可切换的表格

Question

如何制作带有按钮的可切换表，以引导另一个表的不同视图？像这样：

正如您所看到的，一旦您点击按钮，它就会转到另一个表格列表。

这是一个基础：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
})
})();

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

Answer 2

这是一个建议

将每个表格包装在<div id="table1"> <div id="table2">等中并默认隐藏它们。这里有一些帮助：hiding div using js

然后仅显示与用户点击的按钮关联的表的<div>。你可以使用javascript，jquery作为几个例子。

你可能需要开始研究学习一些基本的javascript / jquery，如果你还不知道，你将会需要它。

祝你好运。

Answer 3

您可以在同一文件中创建多个分区，并隐藏除初始页面加载期间要显示的主分区以外的所有分区。然后使用“onClick ='showNextDiv（）;”在按钮内部。

javascript的一个示例是：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict()
function showNextDiv() {
  document.getElementById('DivName').style.display = "block";
  document.getElementById('FirstDiv').style.display = "none";
}
</script>

所有这一切都说明当有人点击按钮时，此脚本会运行并显示“DivName”div。这就是“阻止”的含义。它还通过使用“无”来关闭“FirstDiv”部门。

您可以向脚本添加尽可能多的“block”和/或“none”语句。如果您有6个分区，则需要显示一个分区并关闭5.

我希望这会有所帮助。我不是这方面的专家，但对我来说效果很好。