Question

所以我对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>

Answer 1

您需要根据自己的情况更改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>

如何将特定按钮链接到div，哪些内容可以根据单击的按钮而变化？

1 个答案: