Отделение переключателя/переключателя (jQuery)

Я хочу выполнить довольно простую задачу (я надеюсь!)

Я получил два тега Div и теги привязки, как это:

<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

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

Как это может быть сделано лучший способ?

17
задан Peter Mortensen 30 October 2019 в 10:01
поделиться

4 ответа

Поскольку один div изначально скрыт, вы можете просто вызвать toggle для обоих div:

<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>

<div id="recover-password" style="display:none;">recover password</div>

<script type="text/javascript">
$(function(){
  $('#forgot-password').click(function(){
     $('#login-form').toggle();
     $('#recover-password').toggle(); 
  });
});
</script>
40
ответ дан 30 November 2019 в 11:04
поделиться

Я думаю, вы хотите это:

$('#recover-password').show();

или

$('#recover-password').toggle();

Это стало возможным благодаря jQuery.

4
ответ дан 30 November 2019 в 11:04
поделиться

Используйте это:

<script type="text/javascript" language="javascript">
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>

Ваш HTML должен выглядеть так:

<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

Эй, все в порядке! Одна линия! Я <3 JQuery.

1
ответ дан 30 November 2019 в 11:04
поделиться

Вы можете написать простой плагин jQuery для этого. Плагин будет выглядеть следующим образом:

(function($) {
    $.fn.expandcollapse = function() {
        return this.each(function() {
            obj = $(this);
            switch (obj.css("display")) {
                case "block":
                    displayValue = "none";
                    break;

                case "none":
                default:
                    displayValue = "block";
            }

            obj.css("display", displayValue);
        });
    };
} (jQuery));

Затем подключите плагин к событию click для тега привязки:

$(document).ready(function() {
    $("#mylink").click(function() {
        $("div").expandcollapse();
    });
});

При условии, что вы установили начальные атрибуты «display» для каждого div как «block» и «none» соответственно, они должны переключаться на отображение / скрытие при нажатии на ссылку.

0
ответ дан 30 November 2019 в 11:04
поделиться
Другие вопросы по тегам:

Похожие вопросы: