jQuery addClass example

Change class name on click in jQuery

by csornmo

HTML

<div class="rog-shortcut">
  <nav>
    <div class="nav" id="nav-tab" role="tablist">
      <a class="nav-item nav-link" id="nav-favoriter-tab" data-toggle="tab" href="#nav-favoriter" role="tab" aria-controls="nav-home" aria-selected="false">Favoriter</a>
      <a class="nav-item nav-link" id="nav-applikationer-tab" data-toggle="tab" href="#nav-applikationer" role="tab" aria-controls="nav-profile" aria-selected="false">Applikationer</a>
      <a class="nav-item nav-link active show" id="nav-dokument-tab" data-toggle="tab" href="#nav-dokument" role="tab" aria-controls="nav-contact" aria-selected="false">Dokument</a>
      <a class="nav-item nav-link" id="nav-kontakter-tab" data-toggle="tab" href="#nav-kontakter" role="tab" aria-controls="nav-about" aria-selected="false">Kontakter</a>
      <a class="nav-item nav-link" id="nav-grupper-tab" data-toggle="tab" href="#nav-grupper" role="tab" aria-controls="nav-about" aria-selected="false">Grupper</a>
      <a class="nav-item nav-link" id="nav-taggar-tab" data-toggle="tab" href="#nav-taggar" role="tab" aria-controls="nav-about" aria-selected="false">Taggar</a>
    </div>
  </nav>
  <div class="tab-content">
    <div class="tab-pane" id="nav-favoriter" role="tabpanel" aria-labelledby="nav-home-tab">
      Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
    </div>
    <div class="tab-pane" id="nav-applikationer" role="tabpanel" aria-labelledby="nav-profile-tab">
      Et et consectetur ipsum labore excepteur est proident...

CSS

body {
  margin: 0;
}

.rog-shortcut .tab-content {
  display: none;
}

JavaScript

$('.rog-shortcut a').click(function(e) {
  e.preventDefault();
	var id = $(this).attr('href');
  
  console.log(id);
  $(id).show();
});