创建表格菜单的JavaScript？
[英]creating javascript for table menu?
问题描述
please take a look at the below: 
请看以下内容：
http://codepen.io/anon/pen/LEqvZg http://codepen.io/anon/pen/LEqvZg
im trying to work on the table.. sorry if the code is messy (still learning :)) 我试图在桌子上工作..对不起，如果代码混乱（仍在学习:)）
so there are 2 things im trying to accomplish with the table: 因此，我试图用该表完成两件事：
1) Currently it's displaying the "Games" tab. 1）当前正在显示“游戏”标签。 I made a separate tab in html for "Collector's Edition", but that's hidden under .ces-display . 我在html中为“收藏家版”制作了一个单独的标签，但该标签隐藏在.ces-display下。
I want to toggle between the two. 我想在两者之间切换。
2) In the "Games" tab, there is a menu of platform systems (XONE, PS4 etc). 2）在“游戏”选项卡中，有一个平台系统菜单（XONE，PS4等）。 I'd like to be able to, click on the PS4 tab, and hide the current list of games, and show the PS4 list of games. 我希望能够单击PS4选项卡，并隐藏当前的游戏列表，并显示PS4游戏列表。 the PS4 list is in html under .ps4-display PS4列表位于.ps4-display下的html中
how can i accomplish this with javascript? 我如何用JavaScript完成此操作？
*EDIT: i also noticed that when the browser is resized, the columns in the table get messy. *编辑：我还注意到，当调整浏览器的大小时，表中的列会变得凌乱。 how do i fix this? 我该如何解决？
thanks so much everyone 非常感谢大家
HTML below, followed by CSS 下面是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 的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;
}
1 个解决方案
解决方案1
0 已采纳 2015-03-26 13:51:39
Use this Javascript: 使用此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";
};
As for the HTML, you need to add the IDs in the markup in the following way: 对于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">
Full functional in this codepen http://codepen.io/anon/pen/emxaeo 此Codepen中的全部功能http://codepen.io/anon/pen/emxaeo
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在javascript问题中创建菜单 - creating a menu in javascript issues
下拉菜单未创建 Javascript - Drop Down menu not creating Javascript
创建平滑Javascript弹出菜单 - Creating Smooth Javascript popup menu
用JavaScript创建表头 - creating table header with javascript
在Javascript中创建表 - Creating a table in Javascript
使用JavaScript创建表 - Creating a table using JavaScript
使用 JavaScript 创建表格 - creating table using JavaScript
在JavaScript中创建动态表 - Creating a dynamic table in JavaScript
在javascript中创建一个html表 - creating a html table in javascript
Javascript - 用把手创建表格 - Javascript - Creating table with handlebars
相关标签