So I'm pretty new to JavaScript and HTML, and I was wondering how I can make a menu which allows you to make specific content in div(s) visible based on which button(picture1-12) was clicked. I think it should be possible to make one div which can output String linked to that specific button. I hope I'm clear enough. Is there anyone who could help me?
所以我对JavaScript和HTML都很陌生，我想知道如何制作一个菜单，允许你根据点击的按钮（图片1-12）显示div中的特定内容。我认为应该可以创建一个div，它可以输出链接到该特定按钮的String。我希望我足够清楚。有没有人可以帮助我？
body{
background-color: #A50000;
}
#Container{
width: 90%;
margin: 0 auto;
}
.CenterImage{
text-align: center;
}
.Menu{
float: left;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test_Site</title>
</head>
<body>
<div ID="Container">
<div class="CenterImage">
<img src="images\HeaderImage.jpg" alt="HeaderImage" width="100%">
</div>
<div class="Menu">
<img src="images/Buttons/Picture1.png" alt="Button_1" style="position: absolute; top: 210px;"/>
<img src="images/Buttons/Picture2.png" alt="Button_2" style="position: absolute; top: 320px;"/>
<img src="images/Buttons/Picture3.png" alt="Button_3" style="position: absolute; top: 430px;"/>
<img src="images/Buttons/Picture4.png" alt="Button_4" style="position: absolute; top: 540px;"/>
<img src="images/Buttons/Picture5.png" alt="Button_5" style="position: absolute; top: 650px;"/>
<img src="images/Buttons/Picture6.png" alt="Button_6" style="position: absolute; top: 760px;"/>
<img src="images/Buttons/Picture7.png" alt="Button_7" style="position: absolute; top: 870px;"/>
<img src="images/Buttons/Picture8.png" alt="Button_8" style="position: absolute; top: 980px;"/>
<img src="images/Buttons/Picture9.png" alt="Button_9" style="position: absolute; top: 1090px;"/>
<img src="images/Buttons/Picture10.png" alt="Button_10" style="position: absolute; top: 1200px;"/>
<img src="images/Buttons/Picture11.png" alt="Button_11" style="position: absolute; top: 1310px;"/>
<img src="images/Buttons/Picture12.png" alt="Button_12" style="position: absolute; top: 1420px;"/>
</div>
</div>
</div>
</body>
</html>1 个解决方案
#1
1
You need to change the ids and styles according to your situation. I think this is the one you looking for.
您需要根据您的情况更改ID和样式。我认为这是你要找的那个。
<div style='display:none' id='Button_1'>button1 content</div>
<div style='display:none' id='Button_12'>button12content</div>
<script type='text/javascript'>
$(function() {
$('.Menu img').click(function() {
if ($(this).attr("alt") == 'Button_1')
$('#greenbox').html($('#Button_1'.html()));
});
});
</script>
#1
1
You need to change the ids and styles according to your situation. I think this is the one you looking for.
您需要根据您的情况更改ID和样式。我认为这是你要找的那个。
<div style='display:none' id='Button_1'>button1 content</div>
<div style='display:none' id='Button_12'>button12content</div>
<script type='text/javascript'>
$(function() {
$('.Menu img').click(function() {
if ($(this).attr("alt") == 'Button_1')
$('#greenbox').html($('#Button_1'.html()));
});
});
</script>