我在制作时遇到了问题,所以如果我点击一个按钮,一个表格会隐藏而另一个会显示。
这是 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="1",对第二个表使用 table id="2",但这样做似乎会带走 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
})
})();
最佳答案
我会将所有表设置为 display:none;
然后使用 jQuery Toggle Class将覆盖的“可见”类添加到当前表。
关于jquery - 表格切换器隐藏表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22364343/