Как реализовать навигацию по страницам?

var def = $('.job-nav__item.default').text(); 
$('.job-nav__trigger').text(def); 
 
$('.job-nav__trigger').on('click', function(e){ 
  e.preventDefault(); 
   
  var $this = $(this), 
      nav = $this.closest('.job-nav'), 
      list = nav.find('.job-nav__list'), 
      item = list.find('a'); 
   
  if(!$this.hasClass('on')){ 
    $this.addClass('on'); 
    list.slideDown();    
     
  } else { 
    $this.removeClass('on'); 
    list.slideUp(); 
  } 
}); 
 
 
$(document).on('click', '.job-nav__link' ,function(e){ 
      e.preventDefault(); 
   
      var chooseItem = $(this).html(), 
          item = $(this).closest('.job-nav__item'), 
          nav = $(this).closest('.job-nav'), 
          list = nav.find('.job-nav__list'); 
       
      $('.job-nav__trigger').text($(this).text());       
      $('.job-nav__trigger').removeClass('on'); 
      list.slideUp(); 
       
      if(!item.hasClass('default')){ 
        item.addClass('default').siblings().removeClass('default'); 
      } else { 
        item.removeClass('default'); 
      } 
       
    }); 
 
 
$(document).click(function (e) { 
  var container = $('.job-nav__list'); 
  if ($(e.target).closest('.job-nav').find('.job-nav__trigger').has(e.target).length === 0 &&  
      $(e.target).closest('.job-nav').length === 0){ 
    container.slideUp();; 
  } 
});

* { 
  box-sizing: border-box; 
  font-family: sans-serif; 
} 
 
ul { 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
} 
 
a { 
  text-decoration: none; 
} 
 
.job-nav__trigger { 
  background: #3f81f4; 
  color:#fff; 
  display: block; 
  text-transform: uppercase; 
  padding: 1rem 2rem 1rem 1rem;   
  position: relative; 
  height: 50px; 
} 
 
.job-nav__trigger:after { 
  content: '>'; 
  position: absolute; 
  right: 1rem; 
  top:1rem; 
  font-family: monospace; 
  transform:rotate(90deg); 
} 
 
.job-nav__list { 
  background: #fff; 
  padding: 1rem; 
  display: none; 
} 
 
.job-nav__list a { 
  display: block; 
  line-height: 2rem; 
  color: #000; 
} 
 
.job-nav__list a:hover { 
  color: #3f81f4; 
} 
 
.job-nav__header { 
  margin-bottom: 1rem; 
} 
 
.default { 
  background: #ccc; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
   
   
  <div class="job-nav"> 
    <div class="job-nav__header"> 
      <span class="job-nav__caption">Job categories</span> 
    </div> 
     
    <a href="#" class="job-nav__trigger"> 
      <span class="job-nav__mobile">Default</span> 
    </a> 
     
 
    <ul class="job-nav__list"> 
      <li class="job-nav__item"> 
        <a href="" class="job-nav__link">Agent</a> 
      </li> 
 
      <li class="job-nav__item default"> 
        <a href="" class="job-nav__link ">Booster</a> 
      </li> 
 
      <li class="job-nav__item"> 
        <a href="" class="job-nav__link">Promoter</a> 
      </li> 
 
      <li class="job-nav__item"> 
        <a href="" class="job-nav__link">Other</a> 
      </li> 
 
      <li class="job-nav__item"> 
        <a href=""  class="job-nav__link">Sell your account</a> 
      </li> 
    </ul> 
  </div>