BASIC JQUERY TAB ! 2018

HTML

<a href="#" data-toggle="#article1">link 1</a>
<a href="#" data-toggle="#article2">link 2</a>
<a href="#" data-toggle="#article3">link 3</a>
<a href="#" data-toggle="#article4">link 4</a>

<article id="article1">article 1</article>
<article id="article2">article 2</article>
<article id="article3">article 3</article>
<article id="article4">article 4</article>

CSS

article:not(#article1) {
    display: none;
}

JavaScript

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");
  $("article").hide();
  $(selector).fadeIn();
});