JQuery кнопки, чтобы показать / скрыть изображения и текст - PullRequest
Новая
       1

JQuery кнопки, чтобы показать / скрыть изображения и текст

0 голосов
/ 09 марта 2012

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

Проблема в том, Я нажимаю на btn1, а затем нажимаю на btn2, когда я хочу вернуться к btn1 и нажимаю на него, это не работает. Я должен выполнить двойной щелчок друг на друга, щелкнуть, чтобы открыть изображение, а другой, чтобы закрыть.

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

И я хочу, чтобы это изображение ** появлялось при открытии веб-сайта, но когда я нажимаю любую кнопку (btn1, btn2), скрытие изображения исчезает.

** 3-е изображение не для (btn1 / btn2), но появляется, когда я открываю свою сеть, и n исчезает, когда я нажимаю на любое изображение спасибо за помощь 

<html>
<head>

<script type="text/javascript">

function showhide_menu(id){
   $("#" + id).toggle();
}

</script>
</head>
<body>
<button onclick="showhide_menu('btn1');">Show/Hide.  </button>

 <button onclick="showhide_menu('btn2');">Show/Hide.  </button>

<div id="btn1" style="display:none;">
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    text text text text text text text text text....</div>

<div id="btn2" style="display:none;">
    <img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/>
    text text text text text text text text text....</div>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 09 марта 2012

Вы можете использовать это тоже 

function showhide_menu(){
    if($('#btn1').is(':visible'))
    { 
        $('#btn1').hide();
        $('#btn2').show();
    }
    else
    {
       $('#btn2').hide();
        $('#btn1').show();
    }
}
2 голосов
/ 09 марта 2012

Дайте классу btn -DIVs.Затем скройте их перед переключением:

http://jsfiddle.net/qYCUJ/

HTML 

<div id="btn1" class="btn" style="display:none;">
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    text text text text text text text text text....
</div>
<div id="btn2" class="btn" style="display:none;">
    <img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/>
    text text text text text text text text text....
</div>

JS 

function showhide_menu(id){
    $('.btn:not(#'+id+')').hide();
    $("#" + id).toggle();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...