Question

我正在尝试为多个div进行切换，但是当所有的div都关闭时，我正在寻找它显示一个默认的div，这是唯一可以开始显示的div。

有什么想法吗？感谢

HTML

<button type="button" id="loginButton" href=".loginSwap">Login</button><br/>
<button type="button" id="loginButton" href=".signupSwap">SignUp</button>
<div class='loginSwap ContentSwap' style='display:none'>Login Stuff</div>
<div class='signupSwap ContentSwap' style='display:none'>Signup</div>
<div class='defaultSwap ContentSwap'>Default Text</div>

jquery的

$(document).ready(function() {

$("button").click(function(){
   var Swapper = $(this).attr("href")
    $(Swapper).slideToggle("fast");
    $(".ContentSwap:visible").not(Swapper).hide();

    });

});

http://jsfiddle.net/qjdk655k/3/

Answer 1

在点击处理程序中，您可以检查当前项目是否已经可见，如果可见，则切换将隐藏它，以便我们可以显示默认项目（假设任何时候只能看到1个项目）

＆＃13;

jQuery(function ($) {

    $("button").click(function () {
        var Swapper = $(this).attr("href")
        var $swap = $(Swapper).stop(true, true),
            visible = $swap.is(':visible');
        $swap.slideToggle("fast");
        if (visible) {
            $(".ContentSwap.default").show();
        } else {
            $(".ContentSwap:visible").not(Swapper).hide();
        }

    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="loginButton" href=".loginSwap">Login</button>
<br/>
<button type="button" id="loginButton" href=".signupSwap">SignUp</button>
<div class='loginSwap ContentSwap' style='display:none'>Login Stuff</div>
<div class='signupSwap ContentSwap' style='display:none'>Signup</div>
<div class='ContentSwap default'>Default Text</div>

＆＃13;

在div之间切换，但在全部关闭时使用默认div

1 个答案: