为表格菜单创建javascript？
请看以下内容： 我想在桌子上工作。。抱歉，如果代码很乱（仍在学习：）） 因此，有两件事我试图通过表格来完成： 1） 目前它正在显示“游戏”选项卡。我在html中为您创建了一个单独的选项卡 “收藏家版”，但它隐藏在.ces显示屏下 我想在两者之间切换 2） 在“游戏”选项卡中，有一个平台系统菜单（XONE、PS4等）。我想能够，点击PS4标签，隐藏当前的游戏列表，并显示PS4游戏列表。PS4列表以html格式显示在.PS4 display下 如何使用javascript实现这一点 *编辑：我还注意到，当浏览器调整大小时，表中的列变得杂乱无章。我该如何解决这个问题 非常感谢大家 下面是HTML，后面是CSS为表格菜单创建javascript？,javascript,html,Javascript,Html,请看以下内容： 我想在桌子上工作。。抱歉，如果代码很乱（仍在学习：）） 因此，有两件事我试图通过表格来完成： 1） 目前它正在显示“游戏”选项卡。我在html中为您创建了一个单独的选项卡 “收藏家版”，但它隐藏在.ces显示屏下 我想在两者之间切换 2） 在“游戏”选项卡中，有一个平台系统菜单（XONE、PS4等）。我想能够，点击PS4标签，隐藏当前的游戏列表，并显示PS4游戏列表。PS4列表以html格式显示在.PS4 display下 如何使用javascript实现这一点 *编辑：我还注
<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>
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";
};
<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">
PS4
此代码笔功能齐全非常感谢！我只需要几个按钮，因为我想学习javascript并自己做。所以我将研究您的贡献，并尝试自己添加更多功能。非常感谢您的帮助！：）但有一个问题（为什么我不能按enter键在这里使用换行符）。您认为HTML和css的整体结构如何？你很快就找到了我的密码。结构容易阅读吗？非常感谢您的输入。想知道这个字符串是什么意思吗？替换（/hide/gi，“”）
<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">