Как я могу переключать эти два div при нажатии на внутренний div?

У меня есть:

HTML-код:

<div id="katy"> 

<div> 
<a href="javascript:void(0);" id="a" target="_blank"> Button 1 </a>
</div>

</div>

<div id="perry"> 

<div>
<a href="javascript:void(0);" id="b" target="_blank"> Button 2 </a>
</div>

</div>

ВЫВОД:

Кнопка 1

ЧТО Я ХОЧУ:

Вы нажмете на кнопку 1, появится кнопка 2. Вы нажмете на кнопку 2, появится кнопка 1.

Как я могу переключать эти два div при нажатии на внутренний div?

3 ответа

Вам будет проще, если вы переместите display:none часть в div вместо ссылки.

<div id="katy"> <a href="javascript:void(0);" id="a" target="_blank"> Button 1 </a> </div>
<div id="perry"> <a href="javascript:void(0);" id="b" target="_blank"> Button 2 </a></div>

Затем вы можете использовать этот код jQuery:

$('#a').click(function(){
 toggle();
});

$('#b').click(function(){
 toggle();
});

function toggle(){
 $('#katy').toggle();
 $('#perry').toggle(); 
}

jsfiddle


Просто создайте и обработайте клик с помощью JavaScript следующим образом:

var a = document.getElementById("a"),
 b = document.getElementById("b");

a.onclick = function() {
 this.style.display = "inline";
 b.style.display = "none";
}

b.onclick = function() {
 this.style.display = "inline";
 a.style.display = "none";
}


Добавьте обработчик клика и переключите/покажите/скройте другую кнопку.

Пример Javascript:

var button1 = $('#a'),
 button2 = $('#b');

var toggle = function() {
 button1.toggle();
 button2.toggle();
};

button1.click(toggle);
button2.click(toggle);

Рабочий пример jsfiddle

licensed under cc by-sa 3.0 with attribution.