Question

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

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

Answer 1

使用data-attributes，假设#onelink打开div#one - 向其添加data-id = "one"，等等。

<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(..)，并使用<a>处理event.preventDefault()的默认事件。

或者只是删除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

Answer 2

您可以使用公共处理程序并使用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

Jquery淡入淡出div

2 个答案: