đơn giản div onclick hiển thị javascript

Question

khi tôi nhấp vào bất kỳ liên kết div sửa lỗi hiển thị nhưng khi tôi nhấp vào liên kết tiếp theo, bổ nhào mới được hiển thị cũng như nhấp trước đó. Tôi muốn các div previos để ẩn. NEW để phát triển xin vui lòng một số một giúp tôi ........

đây là đoạn code html cho các liên kết:

<a class="hide" onclick="showdiv('firstimpression'); " href="#">First Impression</a> 
<a class="hide" onclick="showdiv('speaking'); " href="#">Speaking</a> 
<a class="hide" onclick="showdiv('eating'); " href="#">Eating</a> 
<a class="hide" onclick="showdiv('taste'); " href="#">Taste</a> 
<a class="hide" onclick="showdiv('saliva'); " href="#">Saliva</a> 
<a class="hide" onclick="showdiv('cleaning');" href="#">Cleaning</a> 
<a class="hide" onclick="showdiv('nighttime');" href="#">Night Time</a> 
<a class="hide" onclick="showdiv('singledenture');" href="#">Single Denture</a> 
<a class="hide" onclick="showdiv('soreness');" href="#">Soreness</a> 
<a class="hide" onclick="showdiv('burning');" href="#">Burning</a> 
<a class="hide" onclick="showdiv('adapting');" href="#">Adapting</a> 
<a class="hide" onclick="showdiv('futureconsideration');" href="#">Future Consideration</a> 
<a class="hide" onclick="showdiv('conclusion');" href="#">Conclusion</a> 

đây là những divs:

<div id="firstimpression" class="patientinfodivs"> 
<div id="speaking" class="patientinfodivs"> 

... ..và để trên mã

Javascript

<script type="text/javascript"> 
function showdiv(id){ 
document.getElementById(id).style.display = "block"; 
} 
</script> 

Answer 1

Càng nhiều càng tốt Tôi ghét tạo biến toàn cục, họ chỉ đến trong rất tiện dụng đôi khi ...

var _hidediv = null; 
function showdiv(id) { 
    if(_hidediv) 
     _hidediv(); 
    var div = document.getElementById(id); 
    div.style.display = 'block'; 
    _hidediv = function() { div.style.display = 'none'; }; 
} 

này sẽ khiến bạn không cần thiết tìm kiếm thông qua các div để tìm ra một bạn nên che giấu.

Edit: Mở rộng theo đề nghị @ StevenRoose của:

var _targetdiv = null; 
function showdiv(id) { 
    if(_targetdiv) 
     _targetdiv.style.display = 'none'; 
    _targetdiv = document.getElementById(id); 
    _targetdiv.style.display = 'block'; 
} 

Answer 2

Bạn cần trong showdiv() đầu tiên của bạn làm cho tất cả các phần tử của bạn hiển thị = "none"; Và sau đó chọn hiển thị phần tử đã chọn = "chặn";

Bạn cũng có thể sắp xếp nó theo hai hàm hidealldivs(), sẽ ẩn tất cả các div và showdiv hiện tại của bạn(), sẽ hiển thị được chọn.

Sau đó onClick gọi cả hai cái khác

onclick="hidealldivs(); showdiv('eating')" 

Answer 3

Bạn cần phải ban đầu ẩn div của bạn. Hoặc trong StyleSheet hoặc nội tuyến.

.patientinfodivs { 
    display: none; 
} 

<div id="firstimpression" class="patientinfodivs" style="display: none;"> 

Answer 4

Dưới đây là một phiên bản mà không cần sử dụng một toàn cầu (trừ các chức năng chính nó). Biến được giữ trên đối tượng hàm:

function showdiv(id) { 
    if(showdiv.div) { 
     showdiv.div.style.display = 'none'; 
    } 
    showdiv.div = document.getElementById(id); 
    showdiv.div.style.display = 'block'; 
}