使用 javascript 调用不同的 svg 文件

Call different svg files with javascript

本文关键字：svg 文件 javascript 调用 使用      更新时间：2023-09-26

我有map1.svg和map2.svg。

在索引上.php我有一些选项可供选择。如果选择选项 1，则会看到地图 1，如果选择选项 2，则会看到地图 2。我用 php 做这件事，但我不确定如何在点击时做到这一点（我知道我在这里将 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>

<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>

相关文章：