默认情况下根据链接上的类显示一个 div答案

【问题标题】：Show a div by default based on class on link默认情况下根据链接上的类显示一个 div
【发布时间】：2018-06-07 14:07:08
【问题描述】：

我正在尝试根据点击的链接显示/隐藏 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>

【问题讨论】：

标签： jquery

【解决方案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>

【讨论】：