请看下面的内容：
http://codepen.io/anon/pen/LEqvZg
我试图在桌子上工作..对不起，如果代码很乱（仍在学习:)）
所以我试图用表格完成两件事：
1）目前它正在展示＆＃34;游戏＆＃34;标签。我在html中创建了一个单独的选项卡 ＆＃34;收藏家的版本＆＃34;，但隐藏在.ces-display下。
我想在两者之间切换。
2）在＆＃34;游戏＆＃34;选项卡，有一个平台系统菜单（XONE，PS4等）。我希望能够点击PS4标签，隐藏当前的游戏列表，并显示PS4游戏列表。 PS4列表在.ps4-display
下的html中如何使用javascript完成此操作？
*编辑：我还注意到，当浏览器调整大小时，表中的列会变得混乱。我该如何解决这个问题？
非常感谢大家
下面的HTML，然后是CSS
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0;'>
<title >redwhiterocket</title>
<link rel='stylesheet' href='styles/reset.css'>
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.com/libraries/semantic-ui'>
<link rel='stylesheet' href='styles/main.css'>
</head>
<body class="debug">
<header class="menu">
<a class="forum" href="#">forum</a>
<div class="registration">
<!-- login button -->
<button type="button" class="btn btn-default #login" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="" aria-describedby="popover420753">log in</button>
<!-- signup button -->
<button type="button" class="btn btn-default #signup" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="" aria-describedby="popover420753">sign up</button>
</div>
</header>
<!-- search bar -->
<div class="searchbar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="content-wrapper">
<section class="content">
<div class="table">
<div class="category">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="type category-games"><a href="#">Games</a></li>
<li role="presentation" class="type category-ce"><a href="#">Collector's Editions</a></li>
</ul>
</div>
<!-- default display -->
<div class="all-display">
<div class="platforms">
<span class="platforms-click">ALL</span>
<span class="platforms-click">XONE</span>
<span class="platforms-click">PS4</span>
<span class="platforms-click">3DS</span>
<span class="platforms-click">Wii U</span>
</div>
<div class="topwrap">
<div class="toplist-wrapper">
<div class="top
">
<h3 class="toptitle">Buy</h3>
<ol class="list">
<li><a class="list-links" href="#">Deus Ex: Human Revolution</a></li>
<li><a class="list-links" href="#">Gravity Rush</a></li>
<li><a class="list-links" href="#">Destiny</a></li>
<li><a class="list-links" href="#">Silent Hill: PT</a></li>
<li><a class="list-links" href="#">Batman: Arkham Knight</a></li>
</ol>
</div>
</div>
<div class="toplist-wrapper">
<div class="toprent">
<h3 class="toptitle">Rentals</h3>
<ol class="list">
<li><a class="list-links" href="#">Bioshock: Infinite</a></li>
<li><a class="list-links" href="#">Tomb Raider</a></li>
<li><a class="list-links" href="#">Wolfenstein: The New Order</a></li>
<li><a class="list-links" href="#">Hotline Miami: Wrong Number</a></li>
<li><a class="list-links" href="#">Devil May Cry</a></li>
</ol>
</div>
</div>
<div class="toplist-wrapper">
<div class="topfuture">
<h3 class="toptitle">Upcoming</h3>
<ol class="list">
<li><a class="list-links" href="#">Metal Gear Solid V: The Phantom Pain</a></li>
<li><a class="list-links" href="#">Mortal Kombat X</a></li>
<li><a class="list-links" href="#">Fallout 4</a></li>
<li><a class="list-links" href="#">Gravity Rush</a></li>
<li><a class="list-links" href="#">Battlefield 5</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- PS4 display -->
<div class="ps4-display hide">
<div class="platforms">
<span class="platforms-click all">ALL</span>
<span class="platforms-click">XONE</span>
<span class="platforms-click ps4">PS4</span>
<span class="platforms-click">3DS</span>
<span class="platforms-click">Wii U</span>
</div>
<div class="topwrap">
<div class="toplist-wrapper">
<div class="topbuy">
<h3 class="toptitle">Buy</h3>
<ol class="list">
<li><a class="list-links" href="#">Destiny</a></li>
<li><a class="list-links" href="#">Borderlands: Handsome Collection</a></li>
<li><a class="list-links" href="#">Gravity Rush</a></li>
<li><a class="list-links" href="#">Devil May Cry</a></li>
<li><a class="list-links" href="#">Fallout 4</a></li>
</ol>
</div>
</div>
<div class="toplist-wrapper">
<div class="toprent">
<h3 class="toptitle">Rentals</h3>
<ol class="list">
<li><a class="list-links" href="#">Thief</a></li>
<li><a class="list-links" href="#">Dragon Age: Inquisition</a></li>
<li><a class="list-links" href="#">The Last of Us</a></li>
<li><a class="list-links" href="#">FIFA 15</a></li>
<li><a class="list-links" href="#">Warframe</a></li>
</ol>
</div>
</div>
<div class="toplist-wrapper">
<div class="topfuture">
<h3 class="toptitle">Upcoming</h3>
<ol class="list">
<li><a class="list-links" href="#">Batman: Arkham Knight</a></li>
<li><a class="list-links" href="#">Star Wars: Battlefront</a></li>
<li><a class="list-links" href="#">Mortal Kombat X</a></li>
<li><a class="list-links" href="#">The Sims 5</a></li>
<li><a class="list-links" href="#">The Legend of Zelda: Majora's Mask</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- CEs display -->
<div class="ces-display hide">
<!-- <div class="platforms">
<div class="ces-wrapper">
<div class="ces-click #ces">CEs</div>
<div class="ces-click #steelbooks">Steelbooks</div>
</div>
</div> -->
<div class="topwrap">
<div class="topces">
<h3 class="toptitle">Collector's Editions</h3>
<ol class="list">
<li><a class="list-links" href="#">The Last of Us - Pandemic Edition</a></li>
<li><a class="list-links" href="#">Wolfenstein: The New Order - Panzerhund Edition</a></li>
<li><a class="list-links" href="#">Destiny - Ghost Edition</a></li>
<li><a class="list-links" href="#">The Legend of Zelda: Majora's Mask</a></li>
<li><a class="list-links" href="#">Homeworld HD Remastered - Collector's Editon</a></li>
</ol>
</div>
<div class="topces">
<h3 class="toptitle">Steelbooks</h3>
<ol class="list">
<li><a class="list-links" href="#">Deus Ex: Human Revolution</a></li>
<li><a class="list-links" href="#">Batman: Arkham City</a></li>
<li><a class="list-links" href="#">The Last of Us</a></li>
<li><a class="list-links" href="#">Devil May Cry</a></li>
<li><a class="list-links" href="#">Mass Effect</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- image sizes 223 x 124 -->
<div class="trending">
<h3 class="trending-title">Trending</h3>
<ol class="trending-list">
<div class="trending-list-wrapper">
<a class="trending-list-link" href="#">
<li>
<img src="http://www.gamesmediapro.co.uk/wp-content/uploads/2011/05/Deus-Ex-Human-Revolution-GamesMediaPro-image-22.jpg" class="news-pic">
<div class="news-wrapper">
<h3 class="news-title news-float">Deus Ex: Human Revolution Collector's Edition detailed</h3>
<p class="news-paragraph news-float">For "select European countries," New Zealand and Australia! Nope, this edition of Deus Ex: Human Revolution is not coming to the U.S., Canada, or anywhere else.</p>
</div>
</li>
</a>
</div>
<div class="trending-list-wrapper">
<a class="trending-list-link" href="#">
<li>
<img src="http://www.gamesmediapro.co.uk/wp-content/uploads/2011/05/Deus-Ex-Human-Revolution-GamesMediaPro-image-22.jpg" class="news-pic">
<div class="news-wrapper">
<h3 class="news-title news-float">Deus Ex: Human Revolution Collector's Edition detailed</h3>
<p class="news-paragraph news-float">For "select European countries," New Zealand and Australia! Nope, this edition of Deus Ex: Human Revolution is not coming to the U.S., Canada, or anywhere else.</p>
</div>
</li>
</a>
</div>
<div class="trending-list-wrapper">
<a class="trending-list-link" href="#">
<li>
<img src="http://www.gamesmediapro.co.uk/wp-content/uploads/2011/05/Deus-Ex-Human-Revolution-GamesMediaPro-image-22.jpg" class="news-pic">
<div class="news-wrapper">
<h3 class="news-title news-float">Deus Ex: Human Revolution Collector's Edition detailed</h3>
<p class="news-paragraph news-float">For "select European countries," New Zealand and Australia! Nope, this edition of Deus Ex: Human Revolution is not coming to the U.S., Canada, or anywhere else.</p>
</div>
</li>
</a>
</div>
<!-- <li><img src="" class="news-pic"><p class="news-paragraph"></p></li>
<li><img src="" class="news-pic"><p class="news-paragraph"></p></li> -->
</ol>
</div>
</section>
<!-- SIDEBAR -->
<div class="sidebar-wrapper">
<aside class="sidebar">
<h3 class="sidebar-title">giantQtips</h3>
<!-- sidebar list -->
<div class="sidebar-list-wrapper">
<div class="sidebar-details-wrapper">
<h4 class="sidebar-list-title">Out this week</h4>
<ol class="sidebar-list">
<li><a class="sidebar-links">Hotline Miami: Wrong Number</a></li>
<li><a class="sidebar-links">Borderlands: The Handsome Collection</a></li>
<li><a class="sidebar-links">Fallout: New Vegas</a></li>
</ol>
</div>
<div class="sidebar-updates-wrapper">
<h4 class="sidebar-list-title">Updates this week</h4>
<ol class="sidebar-list">
<li>300 new users</li>
<li>Added 268 items to database</li>
<li>bi-weekly contests coming soon</li>
</ol>
</div>
</div>
</div>
</aside>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src="https://bootswatch.com/assets/js/bootswatch.js"></script>
<script src='javascript/main.js'></script>
</body>
</html>
CSS
/* CURRENTLY IN: styles/main.css */
/* color ID #428bca for menu*/
/* RED 228,39,40 | YELLOW 239,145,53*/
/* table background 245,243,232*/
/* background-color: rgba(61,66,57,.1); */
body {
font-size: 1em;
background-color: rgba(218,226,215,.7);
}
.debug .content-wrapper,
.content,
.category-games,
.category-ce,
.platforms,
.trending-list-wrapper,
.news-wrapper,
.all-display,
.ces-display,
.ps4-display,
.trending,
.toptitle,
.topbuy,
.toprent,
.topfuture,
.topces,
.sidebar-wrapper,
.sidebar-list,
.sidebar-list-wrapper,
.sidebar-list-title,
.sidebar-details-wrapper,
.sidebar-dates-wrapper,
.sidebar-updates-wrapper,
.sidebar-updates-title {
/*border: 1px solid black;*/
}
.menu {
font-size: 2em;
padding: 20px 17%;
background-color: black;
}
.registration {
float: right;
}
.login {
margin: 0 20px;
}
/* search bar */
.searchbar {
margin: 20px auto;
width: 35%;
}
/* for content box */
.content-wrapper {
margin: 20px 12%;
}
.content {
font-size: 1em;
width: 70%;
display: inline-block;
}
/* for table menu */
.hide {
display: none;
}
/*.ps4-display {
display: none;
}
.ces-display {
display: none ;
}*/
.type {
font-size: 2em;
}
.category-games {
background-color: rgba(224,146,46,1);
}
.category-ce {
background-color: rgba(55,136,78,1);
}
/* for platforms menu within table*/
.platforms {
margin-top: 10px;
padding: 0 3%;
}
/* platforms options within table*/
.platforms-click {
cursor: pointer;
font-size: 1.5em;
margin: 0 8px;
}
.ces-wrapper {
text-align: right;
padding: 0 8px;
}
.ces-click {
cursor: pointer;
font-size: 1.5em;
display: inline-block;
box-sizing: border box;
padding-right: 8%;
}
.list {
list-style-type: decimal;
padding-left: 8%;
}
.topwrap {
padding: 0 0px;
}
.toplist-wrapper {
width: 33%;
display: inline-block;
margin:;
}
.toptitle {
font-size: 2em;
}
/*.topbuy,
.toprent,
.topfuture, {
display: inline-block;
width: 20%;
margin: 0 1.5%;
}*/
.topces {
margin: 0 2px;
display: inline-block;
width: 49%;
}
.toptitle{
text-align: center;
}
.list-links {
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
/* News section */
.trending {
margin: 50px 0;
}
.trending-list-wrapper {
margin: 5% 0;
display: block;
border-bottom: 3px solid black;
}
.trending-title {
padding: 0 5%;
}
.news-pic {
width: 25%;
}
.news-float {
margin: 0 0;
float: left;
}
.news-wrapper {
float: right;
width: 74%;
}
.news-title {
font-size: 20px;
}
.news-paragraph {
font-size: 12px;
margin: 8px 0;
}
/* sidebar */
.sidebar-wrapper {
width: 27.5%;
float: right;
}
.sidebar-list {
font-size: 12px;
text-decoration: none;
font-weight: bolder;
}
.sidebar-list-wrapper {
padding: 0 3%;
}
.sidebar-title {
text-align: center;
}
.sidebar-list-title {
font-weight: bolder;
}
答案 0 :(得分：0)
使用此Javascript：
var gamesBtn = document.getElementById("games-btn");
var collectorsBtn = document.getElementById("collectors-btn");
var ps4Btn = document.getElementById("ps4-btn");
var gamesDiv = document.getElementById("games-display");
var collectorsDiv = document.getElementById("collectors-display");
var ps4Div = document.getElementById("ps4-display");
gamesBtn.onclick = function() {
gamesDiv.className = gamesDiv.className.replace(/hide/gi, "").trim();
collectorsDiv.className = collectorsDiv.className.trim() + " hide";
ps4Div.className = ps4Div.className.trim() + " hide";
};
collectorsBtn.onclick = function() {
collectorsDiv.className = collectorsDiv.className.replace(/hide/gi, "").trim();
gamesDiv.className = gamesDiv.className.trim() + " hide";
ps4Div.className = ps4Div.className.trim() + " hide";
};
ps4Btn.onclick = function() {
ps4Div.className = ps4Div.className.replace(/hide/gi, "").trim();
gamesDiv.className = gamesDiv.className.trim() + " hide";
collectorsDiv.className = collectorsDiv.className.trim() + " hide";
};
对于HTML，您需要按以下方式在标记中添加ID：
<li role="presentation" class="type category-games" id="games-btn"><a href="#">Games</a></li>
<li role="presentation" class="type category-ce" id="collectors-btn"><a href="#">Collector's Editions</a></li>
<span class="platforms-click" id="ps4-btn">PS4</span>
<div class="all-display" id="games-display">
<div class="ces-display hide" id="collectors-display">
<div class="ps4-display hide" id="ps4-display">
此代码集中的完整功能http://codepen.io/anon/pen/emxaeo