Javascript - Make article appear when clicking on a li

This code does the basics you need, but read about jQuery selectors, especially how to select elements by attributes.

var scrollDuration = 800; // 1000ms = 1 segundo

//ao clicar em uma <li>
$('li').click(function(){

  //pegamos a id do elemento clicado,
  //dividimos o nome da id no ponto "menu-" e
  // pegamos o lado da direita, de índice 1  

  var target = $(this).attr('id').split('menu-')[1];

  //remove classe do 'selected' do elemento com ela
  $('.selected').removeClass('selected');

  //adiciona classe no 'selected' no elemento clicado
  $(this).addClass('selected');  

  //escondemos o <article> com classe 'visible'  
  $('article.visible')
    .css('display','none')
    .removeClass('visible');

  //podemos concatenar a var target com '#', o que forma
  //uma query para o jquery: '#SLIP' ou '#CARD'
  $('#'+target)
    .css('display','block')
    .addClass('visible');

  //agora que o elemento está visível, vamos dar scroll até ele
  //http://stackoverflow.com/a/6677069/2467235      
  $('html, body').animate({
      scrollTop: $( '#'+target ).offset().top
  }, scrollDuration);

});

Another interesting alternative might be to add / remove classes that hide / show the elements. In the example I use a class called "visible" to mark the current article. If in your css you put

.article{ /* todos os article's começam escondidos */
  display:none;
}
article.visible{ /* mostra um article que tenha a class visible */
  display:block;
}

It will not be necessary to use JS lines with .css('display','none')

First of all, your <li> elements must have a class . Second, you do not need the ID attribute. Within <li> put <a> with a HREF pointing to ID <article> %

Assign a property in the CSS so that the first will appear as default and the first <li> in HTML as selected .

$('.showArticle > a').on('click', function(){
   var id = $(this).attr('href'); // Pega o HREF do A que é o ID do Article
   var articles = $('article');

   $('.showArticle').removeClass('selected'); // Remove a classe selected dos LIS
   $(this).parent().addClass('selected'); // Aplica a classe selected ao LI selecionado 

   articles.css('display', 'none'); // Esconde todos os Articles
   $(id).css('display', 'block'); // Mostra apenas o selecionado.
});

article{
    display: none;
}

section article:first-child{
    display: block; /* ou block */
}

ul li a{
    color: #000;
    text-decoration:none;
}

ul li.selected a{
  color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><ul><liclass="showArticle selected"><a href="#card">Tab 1</a></li>
  <li class="showArticle"><a href="#slip">Tab 2</a></li>
  <li class="showArticle"><a href="#folk">Tab 3</a></li>
</ul>

<section>
  <article id="card">Article 1</article>
  <article id="slip">Article 2</article>
  <article id="folk">Article 3</article>
</section>

The question looks more like a request, so I'll just respond with a sample code: p

var defaultArticle
var articles$ = {}

articles$[defaultArticle = "CARD"] = $("#CARD")
articles$.SLIP = $("#SLIP")

var selectArticle = identifier => {
  for (var i in articles) {
    var method = i === identifier ?
                 "show" : "hide"
    articles$[i][method]()
  }
}

var $lis;

var selectLi = identifier => {
  $lis.each(function(i) {
    var method = i === identifier ?
                 "addClass" : "removeClass"
    this[method]("selected")
  })
}

$lis.click(function() {
  var articleId = this.id.split('-')[1]
  selectArticle(articleId)
  selectLi(this.id)
})

/* Visualiza o article padrão */
selectArticle(defaultArticle)

/* e seleciona o li padrão (dá para melhorar essa seleção) */
selectLi($lis[0].id)