[英]How do you link a HTML img to toggle between hiding/showing an element (in this case, a table) with javascript?
如果问题写得不好并且难以理解，我深表歉意（我才刚刚开始编写代码，也是stackoverflow的新手：）），但我希望能够单击每个图像，并为每个行星弹出不同的表格，事实（图片中显示了水星表示例）。 我有想要显示它的表，但不确定如何将其链接到每个img，并在选定时将其替换为与新星球相关的其他表（希望这样做！）。
我还没有js的代码，但我想我需要为每个图像使用单独的函数吗？
另外，如何在html图像之间放置空格（我认为是填充？）？
这么多问题，我不好！ 😂
h1 { color: seagreen } h4 { color: seagreen } table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 67%; } td { border: 2px solid black; text-align: left; font-family: Arial, Helvetica, sans-serif; padding: 1ex } th { border: 3px solid black; text-align: center; font-family: Arial, Helvetica, sans-serif; padding: 1ex } mercury { }
<h1>The Eight Planets</h1> <h4> Click on any planet below to learn!</h4> <!-- mercury --> <img id = "mercury" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMy8wOTcvb3JpZ2luYWwvaWcyOTVfcGxhbmV0c19NZXJjdXJ5XzAyLmpwZw==" width="100" height="100"> <table> <tr> <th> PLANET PROFILE</th> <th>QUICK FACTS</th> </tr> <td> Moons: 0 </td> <td> Your weight on Mercury would be 38% of your weight on Earth </td> </tr> <td> Diameter: 4,879km </td> <td> A day on the surface of Mercury lasts 176 Earth days </td> </tr> <td> Orbit period: 88 days </td> <td> Mercury has more craters and impact marks that any other planet </td> </tr> <td> Surface temperature: -173 to 427°C </td> <td> After the Earth, Mercury is the second densest planet </td> </tr> <td> First record: 14th century BC </td> <td> The orbit of Mercury is an ellipse rather than circular </td> <!-- venus --> <img id = "venus" src="https://s-media-cache-ak0.pinimg.com/originals/98/09/66/9809666c323d35c266117428dd495791.jpg" width="100" height="100"> <!-- earth --> <img id = "earth" src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2014/1-earth.jpg" width="100" height="100"> <!-- mars --> <img id = "mars" src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" width="100" height="100"> <!-- jupiter --> <img id = "jupiter" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/330px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg" width="100" height="100"> <!-- saturn --> <img id = "saturn" src="https://media.istockphoto.com/vectors/planet-saturn-vector-vector-id165060389?k=6&m=165060389&s=612x612&w=0&h=wfA9UIF6EaoGannx6fiE1gSe3G1ixtpGEfvXH2Eqhrg=" width="100" height="100"> <!-- uranus --> <img id = "uranus" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg" width="100" height="100"> <!-- neptune --> <img id = "neptune" src="https://img.purch.com/h/1000/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMC8xMjIvb3JpZ2luYWwvMDcwOTE4X25lcHR1bmVfMDIuanBn" width="100" height="100"> </html>
在这里，我对您的图片Id进行了一些小的更改，但基本上是：
arr_planets数组，其中包含行星的名称。 arr_planets数组，并检查所选img的id是否与存储在数组中的id相同。 这只是您可以用来指导自己的一个示例：
// Array with planets. var arr_planets = ["mercury", "venus", "earth", "mars", "jupiter", "saturn", "uranus", "neptune"]; /* Show the selected div according to "id_planet_id" value */ function showTable(id_planet_id) { // Loop "arr_planets" array and check if it's the same as the supplied in the paramenter: for (var i = 0; i < arr_planets.length; i++) { // If so, show it. if (arr_planets[i] == id_planet_id) { document.getElementById(arr_planets[i]).removeAttribute("style"); } else { // Otherwise, hide them. document.getElementById(arr_planets[i]).setAttribute("style", "display: none;"); } } }
h1 { color: seagreen } h4 { color: seagreen } table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 67%; } td { border: 2px solid black; text-align: left; font-family: Arial, Helvetica, sans-serif; padding: 1ex } th { border: 3px solid black; text-align: center; font-family: Arial, Helvetica, sans-serif; padding: 1ex } mercury {}
<h1>The Eight Planets</h1> <h4> Click on any planet below to learn!</h4> <div id="divPlanets" class="divContAllPlanets"> <!-- mercury --> <img id="mercury_img" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMy8wOTcvb3JpZ2luYWwvaWcyOTVfcGxhbmV0c19NZXJjdXJ5XzAyLmpwZw==" width="100" height="100" onclick="showTable('mercury');" /> <!-- venus --> <img id="venus_img" src="https://s-media-cache-ak0.pinimg.com/originals/98/09/66/9809666c323d35c266117428dd495791.jpg" width="100" height="100" onclick="showTable('venus');" /> <!-- earth --> <img id="earth_img" src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2014/1-earth.jpg" width="100" height="100" onclick="showTable('earth');" /> <!-- mars --> <img id="mars_img" src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" width="100" height="100" onclick="showTable('mars');" /> <!-- jupiter --> <img id="jupiter_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/330px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg" width="100" height="100" onclick="showTable('jupiter');" /> <!-- saturn --> <img id="saturn_img" src="https://media.istockphoto.com/vectors/planet-saturn-vector-vector-id165060389?k=6&m=165060389&s=612x612&w=0&h=wfA9UIF6EaoGannx6fiE1gSe3G1ixtpGEfvXH2Eqhrg=" width="100" height="100" onclick="showTable('saturn');" /> <!-- uranus --> <img id="uranus_img" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg" width="100" height="100" onclick="showTable('uranus');" /> <!-- neptune --> <img id="neptune_img" src="https://img.purch.com/h/1000/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMC8xMjIvb3JpZ2luYWwvMDcwOTE4X25lcHR1bmVfMDIuanBn" width="100" height="100" onclick="showTable('neptune');" /> </div> <div id="divTablesPlanets"> <div id="mercury" style="display: none;"> <i>Add here your "mercury" table.</i> </div> <div id="venus" style="display: none;"> <i>Add here your "venus" table.</i> </div> <div id="earth" style="display: none;"> <i>Add here your "earth" table.</i> </div> <div id="mars" style="display: none;"> <i>Add here your "mars" table.</i> </div> <div id="jupiter" style="display: none;"> <i>Add here your "jupiter" table.</i> </div> <div id="saturn" style="display: none;"> <i>Add here your "saturn" table.</i> </div> <div id="uranus" style="display: none;"> <i>Add here your "uranus" table.</i> </div> <div id="neptune" style="display: none;"> <i>Add here your "neptune" table.</i> </div> </div>
只需复制并粘贴，希望对您有所帮助-在每个行星的表壳上更改每个行星的行星详细信息。
<style>
h1, h4 {
color: seagreen
}
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 67%;
}
td {
border: 2px solid black;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
padding: 1ex
}
th {
border: 3px solid black;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding: 1ex
}
/* spacing for you images*/
img {
margin: 10px 5px;
}
</style>
<div align="center">
<h1>The Eight Planets</h1>
<!-- I hope you like this joke here, click to see-->
<h4 onclick="myPlanet('wakanda');"> Click on any planet below to learn!</h4>
<!-- mercury -->
<img onclick="myPlanet('mercury');"
src="https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMy8wOTcvb3JpZ2luYWwvaWcyOTVfcGxhbmV0c19NZXJjdXJ5XzAyLmpwZw=="
width="100" height="100">
<!-- venus -->
<img onclick="myPlanet('venus');"
src="https://s-media-cache-ak0.pinimg.com/originals/98/09/66/9809666c323d35c266117428dd495791.jpg"
width="100" height="100">
<!-- earth -->
<img onclick="myPlanet('earth');"
src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2014/1-earth.jpg"
width="100" height="100">
<!-- mars -->
<img onclick="myPlanet('mars');"
src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg"
width="100" height="100">
<!-- jupiter -->
<img onclick="myPlanet('jupiter');"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/330px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg"
width="100" height="100">
<!-- saturn -->
<img onclick="myPlanet('saturn');"
src="https://media.istockphoto.com/vectors/planet-saturn-vector-vector-id165060389?k=6&m=165060389&s=612x612&w=0&h=wfA9UIF6EaoGannx6fiE1gSe3G1ixtpGEfvXH2Eqhrg="
width="100" height="100">
<!-- uranus -->
<img onclick="myPlanet('uranus');" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg"
width="100" height="100">
<!-- neptune -->
<img onclick="myPlanet('neptune');"
src="https://img.purch.com/h/1000/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMC8xMjIvb3JpZ2luYWwvMDcwOTE4X25lcHR1bmVfMDIuanBn"
width="100" height="100">
<table id="planetInfo">
</table>
</div>
<script>
// for starters this will do, practice more and you will get better
function myPlanet(planet) {
var info = "";
var planetInfo = document.getElementById("planetInfo");
switch (planet) {
case "mercury":
info += "<tr><th> MERCURY PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "venus":
info += "<tr><th> VENUS PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "earth":
info += "<tr><th> EARTH PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "mars":
info += "<tr><th> MARS PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "jupiter":
info += "<tr><th> JUPITER PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "saturn":
info += "<tr><th> SATURN PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "uranus":
info += "<tr><th> URANUS PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
case "neptune":
info += "<tr><th> NEPTUNE PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
break;
default:
info += "<tr><th> WAKANDA PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
}
planetInfo.innerHTML = info;
}
</script>
在隐藏和显示元素之间切换 JavaScript 不起作用
[英]Toggle between hiding and showing an element with JavaScript is not working
如何使用JavaScript在HTML元素的两个ID之间切换？
[英]How do I toggle between two IDs of a HTML element with javascript?
如何根据从下拉列表中选择的值在显示和隐藏元素之间切换？
[英]How do I toggle between displaying and hiding an element depending on a value selected from a drop down?
如何通过一个按钮在隐藏和显示多张图片之间切换
[英]how to toggle between hiding and showing multiple pictures with a single button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.