Q:

Show a div by default based on class on link

I am trying to show/hide divs based on which links have been clicked. The code below has been taken from a different question in SO. Jquery - determining which link was clicked
This code works great except that it shows all div by default and hides/shows divs correctly after the links have been clicked. The code is given below and what i need to do is based on which class has active in it, its corresponding div needs to be shown and the rest hidden. In this case "foo" should be displayed. 
I am not really stuck with this code. I am open to new logic if required. I just want to show a div which is linked to the  href. 

jQuery(function($) {
    
      var $navlinks = $('.navlink'),
        $navhiddens = $('.navhidden');
    
      $navlinks.on('click', function(e) {
    
        // this is your link
        $link = $(this);
    
        // get my hidden div + toggle
        $my_navhidden = $navhiddens
          .eq($navlinks.index(this))
          .toggle();
    
        // hide all the other navhiddens 
        $navhiddens.not($my_navhidden).hide();
    
        
        
    
      });
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="navlink active">Link 1</a>
    <a href="#" class="navlink">Link 2</a>
    <a href="#" class="navlink">Link 3</a>
    
    <div class="navhidden">foo</div>
    <div class="navhidden">bar</div>
    <div class="navhidden">herp</div>

A:

You can set up the display based on the initial active status at the bottom of the function.

jQuery(function($) {
    
      var $navlinks = $('.navlink'),
        $navhiddens = $('.navhidden');
    
      $navlinks.on('click', function(e) {
    
        // this is your link
        $link = $(this);
    
        // get my hidden div + toggle
        $my_navhidden = $navhiddens
          .eq($navlinks.index(this))
          .toggle();
    
        // hide all the other navhiddens 
        $navhiddens.not($my_navhidden).hide();
    
      });

      // set initial display
      $('.navhidden').hide();
      if($('.active').length > 0){    
          $('.navhidden').eq($(".active").index() - 1).show();
      }

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="navlink active">Link 1</a>
    <a href="#" class="navlink">Link 2</a>
    <a href="#" class="navlink">Link 3</a>
    
    <div class="navhidden">foo</div>
    <div class="navhidden">bar</div>
    <div class="navhidden">herp</div>

