使用 javascript 调用不同的 svg 文件
Call different svg files with javascript
我有 map1.svg 和 map2.svg。
在 index.php 我有一些选择 select。如果你 select 选项 1 你会看到地图 1,如果你 select 选项 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>
我有 map1.svg 和 map2.svg。
在 index.php 我有一些选择 select。如果你 select 选项 1 你会看到地图 1,如果你 select 选项 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>