jquery 처음에는 활성 상태 인 div가 표시됩니다.

Question

<script type="text/javascript"> 
var _hidediv = null; 
function showdiv(id) { 
    if(_hidediv) 
     _hidediv(); 
    var div = document.getElementById(id); 
    div.style.display = 'block'; 
    _hidediv = function() { div.style.display = 'none'; }; 
} 
</script> 


#nav li { width: 100px; height: 20px; margin: 2px; background: green; cursor: pointer; } 
#filtration { 
    display: none; 
    width: 100px; height: 100px; 
    background: #000; 
} 
#solid { 
    display: none; 
    width: 100px; height: 100px; 
    background: #c0c0c0; 
}  
#chemistry { 
    display: none; 
    width: 100px; height: 100px; 
    background: red; 
} 


<ul id="nav"> 
    <li onclick="showdiv('filtration');">Filtration</li> 
    <li onclick="showdiv('solid');">Solidification</li> 
    <li onclick="showdiv('chemistry');">Chemistry</li> 
</ul> 

<div id="filtration">&nbsp;</div> 
<div id="solid">&nbsp;</div> 
<div id="chemistry">&nbsp;</div>​ 

콘텐츠를 표시하거나 숨기려면 탐색 모음을 설정해야합니다. 위 코드는 정상적으로 작동하지만 문제는 처음에 페이지를 방문 할 때 콘텐츠를 표시하도록하는 것입니다. . 위의 코드는 모든 div가 처음에 숨겨져있는 경우에만 작동합니다.

하나의 div를 display : block으로 설정할 수 있지만 표시된 div 이외의 다른 nav 링크를 클릭해도 아무 것도 발생하지 않습니다. 표시하도록 설정된 해당 div에 대한 링크를 클릭해야합니다. 먼저 블록을 만든 다음 다른 링크를 클릭하면됩니다. 쓸모가 없습니다.

첫 번째 콘텐츠 div (#filtration)가 처음에는 display : block으로 설정되도록 수정하면 사용자가 UL의 링크를 클릭하여 표시 할 수 있습니다.

http://jsfiddle.net/2MpmK/3/

감사합니다!

Answer 1

당신은 선택을 표시하기 전에 다른 div의를 숨겨야합니다 :

function showdiv(id) { 
    var divs = document.getElementsByTagName('div'), 
     div = document.getElementById(id); 
    for (var i=0; i<divs.length; i++) { 
     divs[i].style.display = 'none'; 
    } 
    div.style.display = 'block'; 
} 
​ 

FIDDLE

을 또는 당신이 할 수있는 jQuery를 함께 그 온 클릭 기능없이 :

<ul id="nav"> 
    <li data-id="filtration">Filtration</li> 
    <li data-id="solid">Solidification</li> 
    <li data-id="chemistry">Chemistry</li> 
</ul> 

-

$(function() { 
    $('#nav li').on('click', function() { 
     $('#'+$(this).data('id')).show().siblings('div').hide(); 
    }); 
}); 
​ 

jQuery로

FIDDLE

Answer 2

: 이것에 대한

큰

function showdiv(id) 
{ 
    $('.content').hide(); 
    $('#'+id).toggle(); 
} 

#filtration { 
    width: 100px; height: 100px; 
    background: #000; 
} 
​ 
<div id="filtration" class="content">&nbsp;</div> 
<div id="solid" class="content">&nbsp;</div> 
<div id="chemistry" class="content">&nbsp;</div>​