Javascript 切换表格的按钮

我做了一些按钮，每当你按下它们，它就会把你带到另一张桌子上

我的问题是表（已经制作/设计）没有显示——只有数据显示

按钮本身可以工作，但不允许显示表格，只允许显示数据

我真的非常感谢你的帮助

链接到演示：

Html:

爪哇：

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

---

您没有向表中添加类，因此CSS甚至没有做任何事情。看起来很简单，除非我遗漏了什么

<table id="1" class="table3">
<table id="2" class="table3">
<table id="3" class="table3">
<table id="4" class="table3">

---

css中的

.table3

表示所有具有名为“table3”的类的内容

问题在于您没有关闭表。您将每个表都保持打开状态，因此jQuery不会看到任何完整的表元素

看看这把我为你更新的改良小提琴

。。。
...
...
...

---

检查标记并关闭所有打开的标记，您将被设置。

我刚刚意识到我没有正确阅读您的问题。但关键是：您应该编辑标记并关闭打开的标记

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

<table id="1" class="table3">
<table id="2" class="table3">
<table id="3" class="table3">
<table id="4" class="table3">

<table id="1">...</table>
<table id="2">...</table>
<table id="3">...</table>
<table id="4">...</table>