JavaScript显示/隐藏边框/线条
我创建了一个交互式地图，当选择区域时，相关内容应该显示/隐藏，这样可以正常工作。
我遇到的问题实际上是将区域/点中的跟踪线连接到相关的内容框。
我如何使用我已有的JavaScript来解决这个问题：
<style>
/* Fonts */
@font-face {
font-family: 'Newbaskn';
src: url('fonts/Newbaskn.eot');
src: url('fonts/Newbaskn.eot') format('embedded-opentype'),
url('fonts/Newbaskn.woff2') format('woff2'),
url('fonts/Newbaskn.woff') format('woff'),
url('fonts/Newbaskn.ttf') format('truetype'),
url('fonts/Newbaskn.svg#Newbaskn') format('svg');
}
@font-face {
font-family: 'OpenSansLight';
src: url('fonts/OpenSansLight.eot');
src: url('fonts/OpenSansLight.eot') format('embedded-opentype'),
url('fonts/OpenSansLight.woff2') format('woff2'),
url('fonts/OpenSansLight.woff') format('woff'),
url('fonts/OpenSansLight.ttf') format('truetype'),
url('fonts/OpenSansLight.svg#OpenSansLight') format('svg');
}
.map h3{font-family: 'Newbaskn';text-transform:uppercase;color:#b3772c;font-size:13px;font-weight:normal;line-height:0px;}
.map table{font-family: 'OpenSansLight';font-size:13px;font-weight:normal;padding: 15px;}
p{text-align:left;font-family: 'OpenSansLight';}
</style>
<div class="map" align="center">
<img src="mandela-map.jpg" alt="map" width="500" height="431" border="0">
<button title="University of Cape Town 
University of Western Cape" name="uct-btn" id="uct-btn" style=" cursor:pointer; position: relative; left: -420px; top: -35px; border: none; background:#000;border-radius: 15px;width: 1%;height: 2%;">o</button>
<button title="University of Stellenbosch" name="stell-btn" id="stell-btn" style="cursor: pointer; position: relative; left: -430px; top: -23px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="Nelson Mandela Metropolitan University" name="nelson-btn" id="nelson-btn" style="cursor: pointer; position: relative; left: -295px; top: -40px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="Rhodes University" name="rhodes-btn" id="rhodes-btn" style="cursor: pointer; position: relative; left: -280px;top: -45px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="University of Free State" name="free-btn" id="free-btn" style="cursor: pointer; position: relative; left: -292px;top: -189px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="University of Kwazulu-Natal" name="kzn-btn" id="kzn-btn" style="cursor: pointer; position: relative; left: -200px;top: -162px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="University of the Witwatersrand" name="wit-btn" id="wit-btn" style="cursor: pointer; position: relative; left: -280px;top: -288px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<!-- University of Cape Town -->
<div id="uct-content" style="display:none;border: #000 1px solid; background: transparent; width: 407px; height: auto; position: relative; left: -500px; top: -375px;">
<table width="100%">
<tr>
<td colspan="2"><h3>University of Cape Town</h3></td>
</tr>
<tr>
<td colspan="2"><strong>Theme:</strong> Youth & Social Cohesion</td>
</tr>
<tr>
<td><p><strong>Research Chairs:</strong></p></td>
<td> <p>Poverty and Inequality</p></td>
</tr>
<tr>
<td> </td>
<td>Land Reform and Democracy</td>
</tr>
<tr>
<td> </td>
<td>Urban Policy</td>
</tr>
<tr>
<td> </td>
<td>Economic Growth, Poverty and Inequality</td>
</tr>
<tr>
<td> </td>
<td><p> Health and Wealth</p></td>
</tr>
</table>
</div>
<!-- University of Western Cape -->
<div id="uwc-content" style="display:none;border: #000 1px solid; background: transparent; width: 344px;height: auto;position: relative;left: -533px; top: -355px;">
<table width="100%">
<tr>
<td><h3>University of Western Cape</h3></td>
</tr>
<tr>
<td><strong>Research Chair:</strong> Poverty, Land and Agrarian Studies</td>
</tr>
</table>
</div>
<!-- University of Stellenbosch -->
<div id="stell-content" style="display:none;border: #000 1px solid; background: #fff; width: 340px;height: auto;position: relative;left: -534px; top: -150px;">
<table width="100%">
<tr>
<td><h3>University of Stellenbosch</h3></td>
</tr>
<tr>
<td><strong>Research Chair</strong>: Economics of Social Policy</td>
</tr>
</table>
</div>
<!-- Nelson Mandela Metropolitan University -->
<div id="nelson-content" style="display:none;border: #000 1px solid; background: #fff; width: 407px; height: auto; position: relative; left: -500px; top: -100px;">
<table width="100%">
<tr>
<td><h3>Nelson mandela metropolitan University</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Education</td>
</tr>
</table>
</div>
<!-- Rhodes University -->
<div id="rhodes-content" style="display:none;border: #000 1px solid; background: #fff;width: 189px;height: auto;position: relative;left: 64px;top: 0px;">
<table width="100%">
<tr>
<td><h3>Rhodes University</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Education</td>
</tr>
</table>
</div>
<!-- University of Free State -->
<div id="free-content" style="display:none;border: #000 1px solid; background: #fff;width: 236px;height: auto;position: relative;left: 191px;top: -78px;">
<table width="100%">
<tr>
<td><h3>University of Free State</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Social Cohesion</td>
</tr>
</table>
</div>
<!-- University of Kwazulu-Natal -->
<div id="kzn-content" style="display:none;border: #000 1px solid; background: #fff;width: 297px;height: auto;position: relative;left: 317px;top: -151px;">
<table width="100%">
<tr>
<td><h3>University of Kwazulu-Natal</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Economic Developments</td>
</tr>
</table>
</div>
<!-- University of the Witwatersrand -->
<div id="wit-content" style="display:none;border: #000 1px solid; background: #fff;width: 372px;height: auto;position: relative;left: 377px;top: -253px;">
<table width="100%">
<tr>
<td><h3>University of the Witwatersrand</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Inequality</td>
</tr>
<tr>
<td><strong>Research Chairs:</strong> Development Planning and Modeling
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#uct-btn").click(function(){
$("#uct-content").fadeToggle(500);
$("#uwc-content").fadeToggle(500);
$("#stell-content").hide(0);
$("#nelson-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#stell-btn").click(function(){
$("#stell-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#uwc-content").hide(0);
$("#nelson-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#nelson-btn").click(function(){
$("#nelson-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#rhodes-btn").click(function(){
$("#rhodes-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#free-btn").click(function(){
$("#free-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#kzn-btn").click(function(){
$("#kzn-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#wit-btn").click(function(){
$("#wit-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
});
});
/*$(document).ready(function(){
$("button#close").click(function(){
$("#uct-content").hide(1000);
});
});*/
</script>
</div>
1 个答案:
答案 0 :(得分：2)
你创建了所有的弹出窗口，如
<!-- University of Kwazulu-Natal -->
<div id="kzn-content" style="display:none;border: #000 1px solid; background: #fff;width: 297px;height: auto;position: relative;left: 317px;top: -151px;">
<div style="height: 1px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; top: 30px; left: -70px; width: 70px;"></div>
<div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; left: -70px; width: 1px; top: -20px; height: 51px;"></div>
<table width="100%">
<tr>
<td><h3>University of Kwazulu-Natal</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Economic Developments</td>
</tr>
</table>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？