Você pode fazer desta forma
Html
<ul>
<li>
<a class="active">Opção 1</a>
</li>
<li>
<a class="">Opção 2</a>
</li>
</ul>
<div class="content active">Mostrar conteúdo 1</div>
<div class="content">Mostrar conteúdo 2</div>
CSS
a {
cursor: pointer;
}
li a.active {
border-bottom: 2px solid #000;
}
.content {
display: none;
}
.content.active {
display: block;
}
Jquery
$(function(){
$('ul li a').click(function(i){
$('ul li a').removeClass('active');
$(this).addClass('active');
$('.content').each(function(index) {
$(this).toggleClass('active');
});
});
});
Ao clicar ele remove o 'active' de todos os 'a' e alterna entre os conteúdos.
Exemplo: https://jsfiddle.net/e1dgsj6u/70/
Fiz de tudo para não alterar o html e o css, esta funcionando, mas
seria bom colocar um identificador para cada conteúdo que você queira
mostra, porque desta forma vai funcionar apenas com dois elementos.
Utilizando data para identificação
HTML
<ul>
<li>
<a class="active" data-id='1'>Opção 1</a>
</li>
<li>
<a class="" data-id='2'>Opção 2</a>
</li>
</ul>
<div class="content active" data-id='1'>Mostrar conteúdo 1</div>
<div class="content" data-id='2'>Mostrar conteúdo 2</div>
Coloquei um data-id para identificar o seu relacionamento
CSS
a {
cursor: pointer;
}
li a.active {
border-bottom: 2px solid #000;
}
.content {
display: none;
}
.content.active {
display: block;
}
O mesmo css
JQUERY
$(function(){
$('ul li a').click(function(){
$('ul li a').removeClass('active');
$('.content').removeClass('active');
$(this).addClass('active');
var id = $(this).data('id');
var content = $('.content').filter(function() {
return $(this).data("id") == id
});
content.addClass('active');
});
});
Assim a ação é realizada de acordo com o seu identificador, assim você pode criar novos elementos sem preocupar em alterar o jquery.
Exemplo: https://jsfiddle.net/e1dgsj6u/72/