Question

我正在尝试在div之间切换，以便在单击标记时显示div。当另一个标签被点击时，div将替换显示的div。

这就是我所做的。

HTML：

<a href="#" rel="#slidingDiv">a</a><br>
<a href="#" rel="#slidingDiv_2">b</a><br>
<a href="#" rel="#slidingDiv_3">c</a><br>
<a href="#" rel="#slidingDiv_4">d</a><br>

<div id="slidingDiv">a</div>
<div id="slidingDiv_2">a</div>
<div id="slidingDiv_3">a</div>
<div id="slidingDiv_4">a</div>

JQUERY：

function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

                var toggleDiv;

                var $divA = $('#slidingDiv'),
                    $divB = $('#slidingDiv_2'),
                        $divC = $('#slidingDiv_3'),
                        $divD = $('#slidingDiv_4'),
                        $divE = $('#slidingDiv_5'),
                        $divF = $('#slidingDiv_6'),
                        $divG = $('#slidingDiv_7'),
                        $divH = $('#slidingDiv_8'),
                        $divI = $('#slidingDiv_9');

                if( $divA.is( ':visible' ) ){
                        $divA.hide();
            }
                if( $divB.is( ':visible' ) ){
                        $divB.hide();
            }
                if( $divC.is( ':visible' ) ){
                        $divC.hide();
            }
                if( $divD.is( ':visible' ) ){
                        $divD.hide();
            }
                if( $divE.is( ':visible' ) ){
                        $divE.hide();
            }
                if( $divF.is( ':visible' ) ){
                        $divF.hide();
            }
                if( $divG.is( ':visible' ) ){
                        $divG.hide();
            }
                if( $divH.is( ':visible' ) ){
                        $divH.hide();
            }
                if( $divI.is( ':visible' ) ){
                        $divI.hide();
            }

                // this reads the rel attribute of the button to determine which div id to toggle
                toggleDiv = $(this).attr('rel'); 


      $('.toggleDiv').slideUp(options.speed, options.easing);   

                // this var stores which button you've clicked
      var toggleClick = $(this);

          var toggleDiv = $(this).attr('rel');

              // here we toggle show/hide the correct div at the right speed and using which easing effect
          $(toggleDiv).slideToggle(options.speed, options.easing, function() {
            // this only fires once the animation is completed
                // if(options.changeText==0){
              //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
               //}

          });

      return false;

    });

};
})(jQuery);

这当前有效，但我知道这可以做得更好，而不是使用if语句。

由于

Answer 1

我们走了：http://jsfiddle.net/fqK36/5/

你的整个功能变为：

$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide',
        slideDiv: '.slide-div'
    };
    var options = $.extend(defaults, options);

    return this.each(function () {
        $(this).click(function () {
            $(options.slideDiv).hide();
            // this var stores which button you've clicked
            var toggleClick = $(this),
                toggleDiv = $(this).data('slide-id');
            // here we toggle show/hide the correct div at the right speed and using which easing effect
            $(toggleDiv).slideToggle(options.speed, options.easing, function () {
                // this only fires once the animation is completed
                // if(options.changeText==0){
                //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                //}

            });


        });

    });

};

然后你可以像这样使用它：

$('a').showHide({'slideDiv' : '.slide-div'});

slideDiv选项可以是您正在使用的自定义选择器，可以使用您想要滑动的div。

所有幻灯片都分配了一个类，这意味着您可以一次隐藏所有幻灯片。然后，您可以通过获取点击链接的div属性来显示定位data-slide-id。

Answer 2

通常，我通过创建hidden类来完成此操作。当你切换到一个新的div时，你可以这样做：

$(this).click(function(){
    $(this).removeClass('hidden') 

    $('div:not(#' + $(this).attr('id') + ')').addClass('hidden')
});

这使用not选择器查找除当前项目之外的所有内容。没有动画，这是一种简单的方法。您还可以使用$('div:not(.hidden)')抓取未隐藏的内容，然后对该选择器中的所有内容运行切换。

$(this).click(function(){

    if($(this).hasClass('hidden'){
        $(this).show()

        $(this).removeClass('hidden')
    }

    $('div:not(#' + $(this).attr('id') + ') :not(.hidden.)')
        .hide().addClass('hidden')
});

可能会帮助清理一下。

JQuery切换多个div之间

2 个答案: