如何在 jquery 中获取锚标记 url 哈希值？答案

【问题标题】：how get anchor tag url hash values in jquery?如何在 jquery 中获取锚标记 url 哈希值？
【发布时间】：2019-03-10 08:34:03
【问题描述】：

如何获取这个 url 锚标签哈希值？我正在尝试这段代码，但这显示未定义。

HTML 和 Jquery 3.2：

$(function(){
    // get current url hash values.
    var current = window.location.hash;
	
    $('#navbarSupportedContent ul li a').each(function(){
        var $this = $(this);
        alert($this.hash);       
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php#aboutus">About Us</a>
      </li>
    <ul>
    </div>

【问题讨论】：

我不太明白你的问题。例如，对于About us，您想获取index.php#aboutus、#aboutus 还是只获取aboutus？
是的，我想获得#aboutus

标签： javascript jquery

【解决方案1】：

.hash 不是jquery object 的属性，而是HTMLAnchorElement（从Element 类扩展的类）的属性，因此您得到undefined。

因此，您可以使用this 来引用实际元素，而不是使用$(this) 创建一个jQuery 对象：

$(function() {
  // get current url hash values.
  var current = window.location.hash;

  $('#navbarSupportedContent ul li a').each(function() {
    alert(this.hash);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="index.php#aboutus">About Us</a>
    </li>
  </ul>
</div>

【讨论】：

其实不用创建jquery对象也可以直接使用this

【解决方案2】：

你真的不需要 jquery，hash 是锚点上的香草 Js 道具 https://www.w3schools.com/jsref/prop_anchor_hash.asp

$(function() {
  // get current url hash values.
  var current = window.location.hash;

  $('#navbarSupportedContent ul li a').each(function() {
    alert(this.hash);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="index.php#aboutus">About Us</a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

您可以简单地选择元素，然后检查 href 是否包含 #。如果包含使用# 拆分它并使用pop 获取值

function getMeHash(){
  let anchors = document.querySelectorAll('#navbarSupportedContent ul li a')
  let hashes = []
   anchors.forEach(e=>{
    if(e.href.includes('#')){
      hashes.push(e.href.split('#').pop())
    }
   })
   console.log(hashes)
}

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php#aboutus">About Us</a>
      </li>
    <ul>
</div>

<button onclick='getMeHash()'>Get me hash </button>

【讨论】：