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

Posted 2023-03-29

【中文标题】当散列锚在 URL 中时显示选择 DIV

【英文标题】：Show select DIVs when hashed anchors are in URL

【发布时间】：2019-07-28 17:19:41

【问题描述】：

我想在仅显示特定锚链接 (myurl.com/#about) 时有条件地显示 div。我将 .dynamic-content 设置为 display: none 在我的 CSS 中。 #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>

【问题讨论】：

window.location.hash.slice(1) 会得到不带 # 的哈希值

【参考方案1】：

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

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

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

【讨论】：

谢谢！我只能让#default-content 显示

【参考方案2】：

你当然可以使用 Taplar 建议的这个方法，或者你可以放弃这个方法，只使用 :target 伪选择器 See css tricks here 的 css

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

#contact:target 
    display: block;

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

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

Here's a link to that question

你也许可以做类似这样的事情：

/* based onhttps://***.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>

时间用完了，所以没有机会测试，但是这样的东西应该可以工作

【讨论】：

请添加使用示例：)

谢谢你，我需要用一段时间来翻译它