javascript - 用javascript调用不同的svg文件

Question

我有map1.svg和map2.svg。

在index.php 上我有一些选项可供选择。如果你选择选项 1，你会看到 map 1，如果你选择选项 2，你会看到 map 2。我是用 php 做的，但我不知道如何在 onclick 上做到这一点(我知道我在这里将 js 与 php 混合在一起，我不应该)。我想做一些类似的事情:

<ul> 
<li><a id="one" onclick="<?php $option=1?>">Option One</a></li> 
<li><a id="two" onclick="<?php $option=2?>">Option Two</a></li>
</ul>

<div>
 <?php if ($option == 1) {
            include("map1.svg"); 
       } elseif ($option ==2) {
            include("map2.svg");
    } ?>
</div>

Answer 1

<ul> 
   <li><a onclick="showMap('map_one')">Option One</a></li> 
   <li><a onclick="showMap('map_two')">Option Two</a></li>
</ul>

<div id="map_one" style="display:none">PHP include map 1 here</div>
<div id="map_two" style="display:none">PHP include map 2 here</div>

按照您想要的方式将任何内容包含在隐藏的 #map_ 元素中之后:

function showMap(mapID) {
   var mapTarget = document.getElementById( mapID );
   mapTarget.style.display = "block";
}

function  showMap(mapID) {
  var mapTarget = document.getElementById( mapID );
  mapTarget.style.display = "block";
}

<ul> 
  <li><a onclick="showMap('map_one')">Option One</a></li> 
  <li><a onclick="showMap('map_two')">Option Two</a></li>
</ul>

<div id="map_one" style="display:none">PHP include map 1 here</div>
<div id="map_two" style="display:none">PHP include map 2 here</div>