如何使用按钮隐藏和显示 div？显示div时如何为按钮添加效果？

Question

我想用按钮隐藏和显示div，但是当我点击按钮时，它只能显示div，不能隐藏。

这是我的小提琴

http://jsfiddle.net/4vaxE/24/

我的编码

<div class="buttons" style="background-color: rgba(0,0,0,.8);">
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

CSS

.button {
    cursor:pointer;
    display:inline-block;
    margin:10px;
    clip: rect(auto,auto,auto,auto);
}

#div1 {
    background:aqua;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div2 {
    background:blue;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div3 {
    background:orange;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}

#div4 {
    background:green;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
a {
    color:aqua;
    -webkit-filter: grayscale(1.0);
}
a:hover {
    color:red;
    -webkit-filter: grayscale(0.0);
}

Javascript

$('#showdiv1').click(function () {
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click(function () {
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').click(function () {
    $('div[id^=div]').hide();
    $('#div3').show();
});

$('#showdiv4').click(function () {
    $('div[id^=div]').hide();
    $('#div4').show();
});

另外，我想在显示 div 时添加一些效果，这就是我想要的示例 http://jqueryui.com/show/

如何修改我的小提琴，以便在单击按钮时会产生一些效果。我想要显示div时“爆炸”的效果。

如何添加到我的小提琴中？

谢谢

Answer 1

$('#div1').toggle();

使用切换而不是显示和隐藏， 对于效果，您可以尝试滑动切换或淡入淡出效果

Answer 2

JS

var selectedEffect="explode";
var options = { percent: 100 };
$('#showdiv1').click(function () {
    $('div[id^=div]').hide();

    $('#div1').show( selectedEffect, options, 500, callback );
});
$('#showdiv2').click(function () {
    $('div[id^=div]').hide();
    $('#div2').show( selectedEffect, options, 500, callback );
});

$('#showdiv3').click(function () {
    $('div[id^=div]').hide();
    $('#div3').show( selectedEffect, options, 500, callback );
});

$('#showdiv4').click(function () {
    $('div[id^=div]').hide();
    $('#div4').show( selectedEffect, options, 500, callback );
});

function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };

Updated Fiddle

Answer 3

$('#showdiv1').click(function () {
    $('div[id^=div]').slideUp();
    $('#div1').slideDown();
});
$('#showdiv2').click(function () {
    $('div[id^=div]').slideUp();
    $('#div2').slideDown();
});

$('#showdiv3').click(function () {
    $('div[id^=div]').slideUp();
    $('#div3').slideDown();
});

$('#showdiv4').click(function () {
    $('div[id^=div]').slideUp();
    $('#div4').slideDown();
});

演示：

http://jsfiddle.net/45k6g/

Answer 4

你可以试试这样的：

$('#showdiv1').click(function () {
    if ( $('div[id^=div]').css('display') === 'block' ) {
        $('div[id^=div]').hide();
    } else {
        $('#div1').show();
    }

Answer 5

$('#showdiv1').click(function () {
    $('div[id^=div]').hide(500);
    $('#div1').show(1000);
});
$('#showdiv2').click(function () {
   $('div[id^=div]').hide(500);
    $('#div2').show(1000);
});

$('#showdiv3').click(function () {
   $('div[id^=div]').hide(500);
    $('#div3').show(1000);
});

$('#showdiv4').click(function () {
    $('div[id^=div]').hide(500);
    $('#div4').show(1000);
});

Answer 6

替换

 $('div[id^=div]').hide();
    $('#div1').show();

通过这个

  if($('#div1').css('display')=='none'){
     $('#div1').show();
    }else {
    $('#div1').hide();
    }

Answer 7

对 jquery Explode 不太熟悉，我查阅了文档，只是想看看它是怎么说的：http://api.jqueryui.com/explode-effect/，在快速阅读之后，我跳上了你的小提琴。

只看小提琴我就看到了一些东西。首先你需要参考jquery UI。 http://code.jquery.com/ui/1.11.0/jquery-ui.js

所以在小提琴中转到外部资源并添加该网址。完成该操作后，请使用代码执行以下操作来选择要爆炸的框：

$('#showdiv1').click(function () {
$('div[id^=div]').hide();
$( "#div1" ).toggle( "explode" ); });

我测试了它，它对我有用。祝你好运，继续努力……你真的很亲密！