默认情况下，根据链接上的类显示div

Question

我试图根据点击的链接显示/隐藏div。下面的代码来自SO中的另一个问题。 Jquery - determining which link was clicked

此代码非常有效，只是它默认显示所有div，并在单击链接后正确隐藏/显示div。下面给出了代码，我需要做的是根据哪个类有活动，需要显示相应的div，其余的隐藏。在这种情况下，应显示“foo”。

我并不是真的坚持使用这段代码。如果需要，我愿意接受新的逻辑。我只是想显示一个与href链接的div。

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>

Answer 1

您可以根据功能底部的初始活动状态设置显示。

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>