Как я могу вызвать элемент тега div с другим элементом тега div, используя функцию onclick

Question

Я занимаюсь разработкой приложения с помощью PhoneGap Framework. Я хочу знать, как я могу вызвать один элемент тега div с другим элементом тега, используя функцию javascript onclick.

Вот мой код: Мне нужно отобразить второе изображение, щелкнув первое изображение (с именами классов в стиле CSS: видимый / невидимый)

<div id="abc" class="visible">
<img style=" z-index:-1" src="icons/firstimage.jpg" width="100%" height="100%" border="0" alt="logo">
</div>

<div id="def" class="invisible">
<img style=" z-index:-1" src="icons/secondimage.jpg" width="100%" height="100%" border="0" alt="logo" >
</div>

Answer 1

Вы можете вызвать функцию javascript по клику и добавить класс, видимый для второго элемента div, как показано ниже,

document.getElementById('def').className = 'visible';

ДЕМО ЗДЕСЬ

Answer 2

Вы можете просто включить обычный JavaScript, ниже я использую jQuery, но это было только для моего удобства.

<div onClick="$('#OtherDiv').html('you click')">test</div>
<div id="OtherDiv"></div>