Переключение видимости между двумя divs

Question

Я хочу переключить/переключить видимость между div id1 и div id2. Я хочу, чтобы div id2 отображался по умолчанию при загрузке страницы, и когда я нажимаю ссылку, я хочу, чтобы div id1 заменил div id2. Я пробовал несколько разных методов, даже немного играл с ним на jsfiddle, но я не могу понять, что мне здесь не хватает.

HTML:

<a href="#id" onclick="toggle_visibility(id1, id2);">Change Payment Method</a> 
<div id="id1" style="display: none"><p>test 1</p></div> 
<div id="id2"><p>test 2</p></div> 

JavaScript:

function toggle_visibility(id1, id2) { 
var e = document.getElementById(id1); 
var e2 = document.getElementById(id2); 
if(e.style.display == 'block') {     
    e.style.display = 'block';    
    e2.style.display = 'none'; 
} 
else { 
    e.style.display = 'none';    
    e2.style.display = 'block'; 
}    
} 

Answer 1

Посмотрите на сигнатуру функции:

function toggle_visibility(id1, id2) 
          ^^^^^^^^ 

Посмотрите, как вы вызываете его:

onclick="toggle_visibility('id'); toggle_visibility('id2');" 
          ^^^^      ^^^^^ 

Согласны ли они? Нет, вы хотите один вызов с двумя аргументами

onclick="toggle_visibility('id1', 'id2');" 

Другой вопрос, ваша функция не так, см решение Fibbe в для этого

Answer 2

Вы должны использовать скобки для того, чтобы иметь несколько линий, пострадавших от If- заявление:

function toggle_visibility(id1, id2) { 
    var e = document.getElementById(id1); 
    var e2 = document.getElementById(id2); 
    if(e.style.display == 'block') {     
     e.style.display = 'block';    
     e2.style.display = 'none'; 
    } 
    else { 
     e.style.display = 'none';    
     e2.style.display = 'block'; 
    }    
} 

Answer 3

Этот код может быть полезным:

<div id="mydivon" style="display:block">This is on.</div> 
<div id="mydivoff" style="display:none">This is off.</div> 


<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a> 

<script language="javascript"> 
    function toggleDiv(divid) 
    { 

    varon = divid + 'on'; 
    varoff = divid + 'off'; 

    if(document.getElementById(varon).style.display == 'block') 
    { 
    document.getElementById(varon).style.display = 'none'; 
    document.getElementById(varoff).style.display = 'block'; 
    } 

    else 
    { 
    document.getElementById(varoff).style.display = 'none'; 
    document.getElementById(varon).style.display = 'block' 
    } 
} 
</script> 

Answer 4

Если и можно использовать Jquery:

Html

<a id="button" >Click</a> 
<div class="div show">1</div> 
<div class="div">2</div> 

Javascript

$('#button').click(function() { 
    $('.div').toggleClass('show'); 
}); 

Css

.div {display:none;} 
.show {display:block;} 

Answer 5

Вы, кажется, неправильно написанное тыс e операторов qithin «if» и «else» в javascript. Правильный путь это-

function toggle_visibility(id1, id2) { 
    var e = document.getElementById(id1); 
    var e2 = document.getElementById(id2); 
    if(e.style.display == 'block') {     
     e.style.display = 'block';    
     e2.style.display = 'none'; 
    } 
    else { 
     e.style.display = 'none';    
     e2.style.display = 'block'; 
    }    
} 

Кроме того, вы прошли аргументы в неправильном направлении, правильный путь IS-

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a> 
<div id="id1" style="display: none"><p>test 1</p></div> 
<div id="id2"><p>test 2</p></div> 

Answer 6

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a> 
<div id="id1" style="display: none"><p>test 1</p></div> 
<div id="id2"><p>test 2</p></div>