当散列锚点在URL中时显示选择DIV

Question

当只显示特定的锚链接（myurl.com/#about）时，我想有条件地显示div。我的.dynamic-content设置为在我的CSS中显示：none。 #default-content显示，所以我知道我很接近，但我是这个级别的脚本新手。让这个工作的最佳方法是什么？谢谢！

(function($) {
  // Parse the URL parameter
  function getParameterByName(name, url) {
    if (!url) {
      url = location.href.split("#").slice(-1)[0];
    }

    return url;

  }
  // Give the parameter a variable name
  var dynamicContent = getParameterByName('#');

  $(document).ready(function() {

    // Check if the URL parameter is about
    if (dynamicContent == 'about') {
      $('#about').show();
    }
    // Check if the URL parameter is expertise
    else if (dynamicContent == 'expertise') {
      $('#expertise').show();
    }
    // Check if the URL parameter is contact
    else if (dynamicContent == 'contact') {
      $('#contact').show();
    }
    // Check if the URL parmeter is empty or not defined, display default content
    else {
      $('#default-content').show();
    }
  });
})(jQuery);

  <div id="default-content" class="dynamic-content">
    This is the default content
  </div>
  <!-- Dynamic Section 1 -->
  <div id="contact" class="dynamic-content">
    Contact content
  </div>
  <!-- Dynamic Section 2 -->
  <div id="expertise" class="dynamic-content">
    Expertise content
  </div>
  <!-- Dynamic Section 3 -->
  <div id="about" class="dynamic-content">
    About content
  </div>

Answer 1

你可以减少你的逻辑。您可以为选择器创建有效哈希的映射，以显示它们。查看选择器，如果找不到则默认，并显示该部分。

$(document).ready(function() {
  var contentByHash = {
    about: '#about'
    , expertise: '#expertise'
    , contact: '#contact'
  };
  var hash = window.location.hash.slice(1);

  $(contentByHash[hash] || '#default-content').show();
});

Answer 2

您当然可以使用Taplar建议的这种方法，或者您可以废弃此方法并仅使用css：target伪选择器See css tricks here

基本上你会像你已经做的那样隐藏你的部分，然后像这样添加一个带有display：block的类

#contact:target {
    display: block;
}

不可否认，显示默认内容有点棘手。您可以测试散列中是否存在值，如果不存在，则显示默认内容。我会调查一下并回复你

编辑：使用伪选择器查看this question接受的答案

Here's a link to that question

你可以做类似的事情：

/* based onhttps://stackoverflow.com/questions/6867095/css-selector-when-target-empty */
.section-wrapper>.dynamic-content:target~#default-content,
.section-wrapper>.dynamic-content {
  display: none;
}

.dynamic-content>#default-content,
.dynamic-content>.dynamic-content:target {
  display: block;
}

<div class="section-wrapper">
  <div id="default-content" class="dynamic-content">
    This is the default content
  </div>
  <!-- Dynamic Section 1 -->
  <div id="contact" class="dynamic-content">
    Contact content
  </div>
  <!-- Dynamic Section 2 -->
  <div id="expertise" class="dynamic-content">
    Expertise content
  </div>
  <!-- Dynamic Section 3 -->
  <div id="about" class="dynamic-content">
    About content
  </div>
  <!-- Dynamic Section 3 -->
</div>

没时间了，所以没有机会测试，但这样的事情应该有用