我在弄清楚如何编写适当的 javascript 或 jquery 以在单击可点击 div 时显示特定 div 时遇到很多麻烦，同时隐藏先前单击的同一类中的所有其他 div。
HTML
<img src="images/Current system & actors.jpg" alt="" usemap="#Map" style="left:275px; position:absolute; top:247px; width:100%; z-index:1; " usermap="#mymap" >
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" style="position:absolute; left:200px; top:200px; " onclick="MM_showHideLayers('crudeoil','','show')" ></div>
<div class="sqtrigger" id="xNP" style="position:absolute; left:300px; top:200px; " onclick="MM_showHideLayers('NP','','show')" ></div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
JavaScript
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) {
v=args[i+2];
if (obj.style) {
obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v;
}
}
}
我找到了有关使用 <area> 执行此操作的信息标签，但是我想避免将我的可点击 div 重写到 map 中的区域，因为我有超过 100 个可点击 div，现在需要一个解决方案...
示例 --> http://jsfiddle.net/berqK/4/
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('x', '');
s = document.getElementById(target_id);
states = document.getElementsByClassName('show');
for (var j = 0; j < states.length; j++) {
states[j].className = '';
}
s.className = 'show';
};
}
那么，如何调整我找到的用于在单击链接时显示 div 的代码，以在单击 div 时显示 div，同时仍然隐藏其他 div？
引用我的 div ... 如何使 id="xcrudeoil"显示 id="crudeoil"(和 xNP 显示 NP)，同时隐藏 div id=info 的所有子 div(或在 class="textbox"内)？
这是我迄今为止所做工作的示例。 (注意:在我的浏览器中，div 出现，但我在 fsfiddle 中看不到它们): http://jsfiddle.net/ZCantrall/Ru82F/6/
提前非常感谢!我非常感谢您提供的任何建议。
*编辑//第二次尝试使用来自/jsfiddle.net/Ru82F/7/的 CSS 以及以下 HTML 和 JS
<html><head>
<title>IES</title>
<link href="IES.css" rel="stylesheet" media="screen" type="text/css" >
</head>
<body>
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" >Oil</div>
<div class="sqtrigger" id="xNP" >NP</div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
<script> src="jquery-1.9.1.js" </script>
<script> src="jquery-migrate-1.1.0.js" </script>
<script>
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
</script>
</body></html>
最佳答案
这个小 jQuery 脚本将在您单击触发器时显示相关的 div 并隐藏其他内容(CSS 可能存在问题，我在本测试中将其删除):
$(document).ready(function() {
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
});
关于javascript - 单击 div 时显示 div 并隐藏同级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21045946/