以下是演示：https://jsfiddle.net/rv18kd6c/31/
我无法尝试显示其他3个按钮，内容与“最近”按钮相同。有人可以给我一些指示吗？ 其他三个按钮也需要以与“最近”按钮相同的方式显示侧栏和表格。 在此先感谢：）
以下是迄今为止编写的所有代码。 JQuery用于显示和隐藏内容。
javascript会更改哪些表格正在显示，我想我还需要3个javascript查询，但我正在努力使其正常运行。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.button-wrapper {
text-align: center;
padding: 10px;
}
.button-wrapper a {
text-decoration: none;
color: #fff;
margin: 10px
}
.content h1 {
text-align: center;
margin-top: 2em;
}
.top-button {
padding: 5px;
background-color: #00622b;
border: 1px solid black;
text-align: center;
width: 50px;
height: 5rem;
margin: 3px;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 4px;
}
.top-button a {
text-decoration: none;
color: black;
}
table {
width: 100%;
font-size: 2vw;
text-align: center;
}
table tr:nth-child(even) {
background-color: #98FB98;
}
table tr:nth-child(odd) {
background-color: mediumseagreen;
}
table th {
background-color: #98FB98;
color: #00622b;
}
* {
box-sizing: border-box
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
/* Style the tab */
.tab {
float: left;
border: none;
background-color: #00622b;
width: 30%;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: #ffffff80;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 2vw;
}
/* Change background color of buttons on hover */
.tab button:hover {
color: #ffffffbf;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #00622b;
color: #fff;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
width: 70%;
border-left: none;
}
</style>
<div class="wrapper">
<div class="button-wrapper">
<a class="flip top-button" href="#first-div" target="" data-toggle="">Recent</a>
<a class="flip top-button" href="#second-div" target="" data-toggle="">Top</a>
<a class="flip top-button" href="#third-div" target="" data-toggle="">Standard</a>
<a class="flip top-button" href="#fourth-div" target="" data-toggle="">Rotten</a>
</div>
<div class="content" id="first-div">
<div class="tab">
<button class="tablinks" onclick="openRating(event, 'Value')" id="defaultOpen">Value for Money</button>
<button class="tablinks" onclick="openRating(event, 'Time')">Time Taken</button>
<button class="tablinks" onclick="openRating(event, 'Quality')">Quality of Work</button>
<button class="tablinks" onclick="openRating(event, 'Average')">Average Rating</button>
</div>
<div id="Value" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Value for Money</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
<div id="Time" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Time Taken</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
<div id="Quality" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Quality of Work</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
<div id="Average" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Average Rating</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
</div>
<div class="content" id="second-div" style="display:none">
</div>
<div class="content" id="third-div" style="display:none">
</div>
<div class="content" id="fourth-div" style="display:none">
</div>
<script>
function openRating(evt, ratingName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(ratingName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// only show one panel at a time
jQuery(".flip").on("click", function(e) {
var target = jQuery(this).attr("href");
jQuery(target).slideToggle("fast");
jQuery(".content").not(target).hide();
e.preventDefault();
});
</script>
答案 0 :(得分：1)
这里的问题是，在页面加载时你启动它：
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
但是当你有多个defaultOpen ID时，只点击第一个（这不是问题，因为只有第一个可见），然后当你点击另一个标签时，你不要刷新新的defaultOpen来选择。你就是这样做的：
// only show one panel at a time
jQuery(".flip").on("click", function(e) {
var target = jQuery(this).attr("href");
jQuery(target).slideToggle("fast");
jQuery(".content").not(target).hide();
jQuery(target).find("#defaultOpen")[0].click();//here i find the default open IN the newly active tab
e.preventDefault();
});
但这会在视觉上无效，因为您的 onclick =＆＃34; openRating（事件，＆＃39;价值＆＃39;）＆＃34; 只会打开第一个＃它发现的价值＆＃34; div： 从那里有两个解决方案：
1 您从不对左侧的类别使用两次相同的ID（例如，注意ids Valuetab2 而不是值）
<div class="content" id="second-div" style="display:none">
<div class="tab">
<button class="tablinks" onclick="openRating(event, 'Valuetab2')" id="defaultOpen">Value for Money</button><!--changed here -->
...
</div>
<div id="Valuetab2" class="tabcontent"><!--changed here -->
...
或 2 您使用类别的类别并调整一些代码，以便打开具有相同类别的每个类别
<div class="content" id="second-div" style="display:none">
<div class="tab">
<button class="tablinks" onclick="openRating(event, 'Value')" id="defaultOpen">Value for Money</button>
...
</div>
<div class="Value tabcontent"> <!--changed here -->
并替换document.getElementById(ratingName).style.display = "block";
通过$("."+ratingName).css('display','block');显示具有相同类的所有类别（它们都将显示，但在另一个的隐形标签内）