单击 div 时显示 div 并隐藏兄弟姐妹答案

【问题标题】：Show div and hide siblings when clicking on div单击 div 时显示 div 并隐藏兄弟姐妹
【发布时间】：2014-01-11 03:51:27
【问题描述】：

我在弄清楚如何编写适当的 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 重写到我的地图中的区域，因为我有超过 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 ... 如何让 id="xcrudeoil" 显示 id="crudeoil" （和 xNP 显示 NP）同时隐藏 div id=info 的所有子 div（或在 class="textbox" 内）？

这是我迄今为止所做的工作示例。（注意：在我的浏览器中出现了 div，但我在 fsfiddle 中看不到它们）：http://jsfiddle.net/ZCantrall/Ru82F/6/

提前非常感谢！我非常感谢您提供的任何建议。

*EDIT // 第二次尝试使用来自 /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>

【问题讨论】：

您正在使用内联 javascript。不要那么做！ :-) 如果你隐藏除你点击的那个之外的所有 div，你会如何点击其他 div？
会的：）谢谢！你能看看我的第二次尝试并告诉我在插入 jQuery 脚本时我做错了什么吗？

标签： javascript jquery html

【解决方案1】：

当您单击触发器时，这个小 jQuery 脚本将显示相关的 div 并隐藏其他的（css 可能存在问题，我在此测试中将其删除）：

$(document).ready(function() {
    $('.sqtrigger').on('click', function(e) {
        var targetId = this.id.replace('x', '');    

        $('#info .textbox').hide();
        $('#' + targetId).show();
    });
});

http://jsfiddle.net/Ru82F/7/

【讨论】：

我没有成功插入这个 jQuery 脚本。这似乎正是我正在寻找的。我尝试将您建议的脚本放在

【解决方案2】：

你能不能试试这个... http://jsfiddle.net/berqK/22/

JQuery 代码...

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('State', 'Layer');
        $("div[Id^='Layer']").css('display','none');
        $('#'+target_id).show();
    };
}

【讨论】：

完整的“jQuery 代码”是$('#oshastatemap').children().click(...);。

【解决方案3】：

这个小的 jQuery 脚本将显示相关的 div 并隐藏其他的

$("target_div").nextAll().hide() $("target_div").prevAll().hide()

【讨论】：