Question

我希望完成一项相当简单的任务（我希望！）

我有两个div标签和一个锚标签，如下所示：

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

我希望实现的是使用锚标签在两个div标签之间切换，隐藏一个标签并显示另一个标签，反之亦然。

如何以最佳方式完成？

最好的问候。

Answer 1

由于最初隐藏了一个div，因此您只需为两个div调用toggle：

<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>

Answer 2

我想你想要这个：

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

或

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

这可以通过JQuery实现。

希望这会有所帮助......

Answer 3

这个怎么样

<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>

嘿，好吧！一条线！我＆lt; 3 jQuery。

Answer 4

您可以编写一个简单的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();
    });
});

假设你将每个div的初始'display'属性分别设置为'block'和'none'，它们应该在点击链接时切换到显示/隐藏。

Answer 5

我认为这有效

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

});

Answer 6

试试这个http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

Answer 7

我使用这种方式为多个块执行此操作而不会产生新的javascript：

<a href="#" data-toggle="thatblock">Show/Hide Content</a>

<div id="thatblock" style="display: none">
  Here is some description that will appear when we click on the button
</div>

然后是所有这些案件的js部分：

$(function() {
  $('*[data-toggle]').click(function() {
    $('#'+$(this).attr('data-toggle')).toggle();
    return false;
  });
});

描述here

Answer 8

这就是我同时切换两个div的方式：

$('#login-form, #recover-password').toggle();

它有效！

Answer 9

function toggling_fields_contact_bank(class_name) {
            jQuery("." + class_name).animate({
                height: 'toggle'
            });
        }

切换/切换div（jquery）

9 个答案: