jquery淡入淡出div

我想获得一组淡入淡出使用jQuery。我有一个解决方案，虽然它看起来很笨重。有没有办法简化我的代码？我很新的jQuery，所以任何帮助非常感谢！jquery淡入淡出div

HTML：

<a class="button" href="javascript:void(0)" id="onelink">Show Div One</a> 
<a class="button" href="javascript:void(0)" id="twolink">Show Div Two</a> 
<a class="button" href="javascript:void(0)" id="threelink">Show Div Three</a> 
<a class="button" href="javascript:void(0)" id="fourlink">Show Div Four</a> 

<div class="content"> 

<div id="one" class="thing">One</div> 
<div id="two" class="thing">Two</div> 
<div id="three" class="thing">Three</div> 
<div id="four" class="thing">Four</div> 

</div>

SCSS：

a.button { 
    text-decoration: none; 
    color: #000; 
    display: inline-block; 
    padding: 10px; 
    margin: 20px; 
    border: 1px solid #000; 
    @include transition (all 0.2s); 

    &:hover { 
    border: 1px solid #dadada; 
    background-color: #f5f5f5; 
    } 
} 

div.thing { 
    border: 1px solid #BADA55; 
    background-color: #dadada; 
    padding: 30px; 
    text-align: center; 
    width: 200px; 
    margin: 20px; 
    position: absolute; 
    display: none; 

    &#one { 
    display: block; 
    } 
}

JQUERY：

$(document).ready(function() { 
    $("#onelink").click(function() { 
    $("div#one").fadeIn(); 
    $("div#two, div#three, div#four").fadeOut(); 
    }); 

    $("#twolink").click(function() { 
    $("div#two").fadeIn(); 
    $("div#one, div#three, div#four").fadeOut(); 
    }); 

    $("#threelink").click(function() { 
    $("div#three").fadeIn(); 
    $("div#one, div#two, div#four").fadeOut(); 
    }); 

    $("#fourlink").click(function() { 
    $("div#four").fadeIn(); 
    $("div#one, div#two, div#three").fadeOut(); 
    }); 
});

Codepen链接是在这里：

http://codepen.io/mikehdesign/pen/eNpxRQ

来源

2015-05-07 Mike Harrison

您可以使用通用处理程序并使用href指定要显示哪个thing，而不是为每个按钮添加单独的处理程序。

<a class="button" href="#one">Show Div One</a> 
<a class="button" href="#two">Show Div Two</a> 
<a class="button" href="#three">Show Div Three</a> 
<a class="button" href="#four">Show Div Four</a> 

<div class="content"> 

    <div id="one" class="thing">One</div> 
    <div id="two" class="thing">Two</div> 
    <div id="three" class="thing">Three</div> 
    <div id="four" class="thing">Four</div> 

</div>

然后

$(document).ready(function() { 
    var $things = $('.thing'); 
    $(".button").click(function (e) { 
     e.preventDefault(); 
     var $div = $($(this).attr('href')); 
     $div.stop().fadeIn(); 
     $things.not($div).stop().fadeOut(); 
    }); 

});

演示：Fiddle

来源

2015-05-07 09:30:43

我还在想着是否使用'href'以代替数据属性比较好。使用'href'需要'event.preventDefault（）;'，但看起来更接近代码的作用。顺便说一句，'$（this）.attr（'href'）'可以被替换为更短的'this.hash'，不是吗？还有一件事：''ID现在没用，所以为什么不删除它们？ – Regent

使用data-attributes，所以假设#onelink打开div#one - 添加data-id = "one"它ANS等，

<a class="button" href="" data-id="one">Show Div One</a> 
<a class="button" href="" data-id="two">Show Div Two</a> 
<a class="button" href="" data-id="three">Show Div Three</a> 
<a class="button" href="" data-id="four">Show Div Four</a>

编辑：

可以删除javascript:void(..)，并且可以使用event.preventDefault()来处理默认事件<a>。

或者只是删除href并在CSS中处理cursor。

此外，正如@Regent所示，由于此解决方案适用于类，因此不再需要ID id="onelink" .. ..

$(document).ready(function() { 
    $(".button").click(function(event) { 
    event.preventDefault(); 
    var $divtoRender = $("#"+$(this).data('id')); 
    $divtoRender.fadeIn(); 
    $("div.thing:visible").not($divtoRender).fadeOut(); 
    }); 
});

Updated CodePen

来源

2015-05-07 09:34:57

jquery淡入淡出div

回答

相关问题