jQuery淡入淡出div

Question

I am trying to get a set of divs to fade in and out using jQuery. I have a solution, though it seems very clunky. Is there a way to streamline my code? I am pretty new to jQuery so any help greatly appreciated!

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 link is here:

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

Answer 1

Use data-attributes , so suppose #onelink opens div#one - add data-id = "one" to it ans so on.,

<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>

EDIT:

The javascript:void(..) can be removed and the default event of <a> can be handled by using event.preventDefault() .

Or maybe just remove the href and handle the cursor in CSS.

Also, as @Regent suggests, the IDs id="onelink" .. are no more required as the solution works on classes.

---

$(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

Instead of adding separate handlers for each button, you can use a common handler and use the href to specify which thing to be displayed.

<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>

then

$(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();
    });

});

Demo: Fiddle