單擊div時顯示div並隱藏同級

Question

我很難弄清楚如何在單擊我的可單擊div時編寫適當的javascript或jquery以顯示特定的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/

在此先多謝！ 我非常感謝您可以提供的任何建議。

*編輯//通過/jsfiddle.net/Ru82F/7/和以下HTML＆JS進行CSS的第二次嘗試

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

Answer 1

當您單擊觸發器時，這個小的jQuery腳本將顯示相關的div並隱藏其他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/

Answer 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();
    };
}

Answer 3

這個小jQuery腳本將顯示相關的div並隱藏其他

$（“ target_div”）。nextAll（）。hide（）$（“ target_div”）。prevAll（）。hide（）

單擊div時顯示div並隱藏同級

問題描述

3 個解決方案

解決方案1
0 已采納 2014-01-10 13:56:25

解決方案2
0 2014-01-10 14:04:10

解決方案3
0 2014-01-10 15:09:16

單擊div時顯示div並隱藏同級

問題描述

3 個解決方案

解決方案1 0 已采納 2014-01-10 13:56:25

解決方案2 0 2014-01-10 14:04:10

解決方案3 0 2014-01-10 15:09:16

解決方案1
0 已采納 2014-01-10 13:56:25

解決方案2
0 2014-01-10 14:04:10

解決方案3
0 2014-01-10 15:09:16