Отделение переключателя/переключателя (jQuery)
Я хочу выполнить довольно простую задачу (я надеюсь!)
Я получил два тега Div и теги привязки, как это:
<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
Я желаю использованию тега привязки, чтобы переключиться между этими двумя тегами Div, скрыть тот и показать другой и наоборот.
Как это может быть сделано лучший способ?
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>
Я думаю, вы хотите это:
$('#recover-password').show();
или
$('#recover-password').toggle();
Это стало возможным благодаря jQuery.
Используйте это:
<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.
Вы можете написать простой плагин 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» соответственно, они должны переключаться на отображение / скрытие при нажатии на ссылку.