Javascript动态页面
小背景：该网站是为大学任务，我们不允许使用第三方库，如bootstrap等我认为我有一个解决方案，但我只能得到它的工作2个按钮（显示或隐藏相反的）但不是多个。我将至少有10个按钮。Javascript动态页面
我试图研究堆栈溢出，但找不到解决方案。这是我的HTML + CSS。 Home是默认页面，其余的应该在点击它们的按钮时在下面的空白处可见。这是一个产品页面。
的jsfiddle：https://jsfiddle.net/33n7yb5h/
任何帮助将不胜感激，它并不需要一个书面的解决方案，而只是指着我在正确的方向会做......我几乎没有任何的JavaScript知识，所以我不能完全肯定我应该在第一时间被谷歌搜索...
<html>
<head>
<title>Design</title>
<link rel="stylesheet" type="text/css" href="css/store.css">
<script type="text/javascript" src="javascript/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="left"><a href="#home">Company</a></li>
<li id="left"><a href="#home">Sales</a></li>
<li id="left"><a href="#home">About</a></li>
<li id="left"><a href="#home">Contact</a></li>
<li id="right1"><a href="">Cart</a></li>
<li id="right2" onclick="myFunction()"><a href="">Geolocate</a></li>
</ul>
<dialog id="myDialog">Your IP address: <?php echo $_SERVER['REMOTE_ADDR']; ?></dialog>
<div id="items">
<ul>
<li id="left"><a href="">Home</a></li>
<li id="Cars"><a href="">Super Cars</a></li>
<li id="Cars"><a href="">Topic 2</a></li>
</ul>
<div id="homepage">
<span><p> Welcome to the store</p></span>
</div>
<div id="showCars">
<div class="productBox">
<div class="productPicture">
</div>
</div>
</div>
</div>
</body>
</html>
ul{list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #363377; border-bottom: 1px solid white;}
li a{display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
#left, #Cars{float: left; border-right:solid 1px #fff;}
#right1, #right2{float: right;}
#left:hover, #right:hover, #Cars:hover{background-color: #555;}
body{
margin: 0px;
padding: 0px;
font-family: tahoma;
background-image: "/img/bg.jpg";
}
p{
text-align: center;
}
#items{
display: inline-block;
border: 1px solid black;
padding: 10px;
margin-top: 25px;
margin-left: 225px;
margin-right: 225px;
position: absolute;
width: 80%;
height: 80%;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background: white;
overflow: hidden;
}
.productBox{
border: 2px solid black;
width: 200px;
height: 300px;
margin-top: 5px;
text-align: center;
}
.productPicture{
border: 1px solid black;
width: 90%;
height: 150px;
margin: 0 auto;
margin-top: 5px;
padding: 5px;
display: inline-block;
}
#showCars{
display: none;
}
下面是一些伪代码，如果我理解你需要正确的：这里有很多方法可以做到这一点，我不还有很多事情要做，所以这里只是一个例子。
<div>
<button onclick="cars()" value="show cars"></button> <!-- if they click this button call the function cars() -->
<button onclick="boats()" value="show boats"></button>
<ul>
<li id=IDname0></li>
<li id=IDname1></li>
<li id=IDname2></li>
</ul>
</div>
<script>
var cars = ["Saab", "Volvo", "BMW"]; //create an array of values you want to load into your tags
var boats = ["Fishing", "Raft", "Other"];
var x = 0;
Function cars()
{
// for each element in cars,
for (x=0; x<cars.length; x++)
{
//acquire the elemt by the ID name, and REPLACE the inner HTML with the value at array cars element x. if you want to add to the inner HTML, use += instead of just =
Document.getElementById('IDname'+x).innerHtml = cars[x]; // will acquire 'IDname0' , 'IDname1', etc.. each tag with an ID of that name (from your <li> above
}
}
Function boats()
{
for (x=0; x<cars.length; x++)
{
Document.getElementById('IDname'+x).innerHtml = boats[x];
}
}
</script>
嘿，谢谢你花时间回复，你可能会评论一下代码，所以我知道我在找什么？这个开关是否会与ID车一起显示一个div，所以只有汽车出现了，然后如果说船被点击了，汽车被拆除并且船会出现？ –
当然！我为cars（）函数添加了注释。小船是完全相同的逻辑，除了船只。希望这可以帮助你！ – John
您可以使用query string，然后使按钮链接到它检查字符串，并定义了每个页面/按钮将做查询字符串参数。这将允许你有页面的HTML CSS等大部分是相同的，除了按钮点击更改的部分。
很多网站都这样做。
例如：https://www.etsy.com/ca/search?q=wallet
我只想指出，您实际上正在使用第三方库。 'jQuery！= vanilla JS' – Schlaus
我的意思是像引导程序这样的东西，我们被允许JQ –