jQuery的fadeIn之一，fadeOut多个div

Question

I have a function like this:

$(document).ready(function(){
  $("#showt").click(function(){
    $(".t").fadeIn("fast");
  });
  $("#showt").click(function(){
    $(".m").fadeOut(0);
  });
  $("#showt").click(function(){
    $(".a").fadeOut(0);
  });
});

$(document).ready(function(){
  $("#showm").click(function(){
    $(".m").fadeIn("fast");
  });
  $("#showm").click(function(){
    $(".t").fadeOut(0);
  });
  $("#showm").click(function(){
    $(".a").fadeOut(0);
  });
});

$(document).ready(function(){
  $("#showa").click(function(){
    $(".a").fadeIn("fast");
  });
  $("#showa").click(function(){
    $(".t").fadeOut(0);
  });
  $("#showa").click(function(){
    $(".m").fadeOut(0);
  });
});

So on a click of a link with a certain ID it shows one, but hides other blocks, everything works perfectly but I'm just interested is there a way to reduce the function's code?

Thank you.

HTML:

<a href="#" class="tag" id="showt">ttt</a>
<a href="#" class="tag" id="showm">mmm</a> 
<a href="#" class="tag" id="showa">aaa</a>          

<div class="row">
  <div class="col-1"></div>
  <div class="col-2">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-3">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-4"></div>

Answer 1

You could use toggle() to toggle the current state. here is the link for api

Also to reduce, you can make a function which will work as callback function for similar work. Like

$('.bar').click(callback);

Answer 2

You can considerably consolidate your code by using custom attributes; I chose the name show-class to denote the class the link wants to show. If you plan to add more classes than just .t , .m , and .a you could add a secondary class that all of them ( .t, .m, .a ) have in common, and fade that out. Additionally, you can use the .hide() function to make your code a little simpler (rather than .fadeOut(0) ).

 $(document).ready(function(){ $(".showStuff").click(function (){ $(".t, .m, .a").hide(); $("." + $(this).attr("show-class")).fadeIn("fast"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="tag showStuff" show-class="t">ttt</a> <a href="#" class="tag showStuff" show-class="m">mmm</a> <a href="#" class="tag showStuff" show-class="a">aaa</a> <div class="row"> <div class="col-1"></div> <div class="col-2"> <div class="t"> Ttt </div> <div class="m"> Mmm </div> <div class="a"> Aaa </div> </div> <div class="col-3"> <div class="t"> Ttt </div> <div class="m"> Mmm </div> <div class="a"> Aaa </div> </div> <div class="col-4"></div>