在单击时将href与window.location.hash进行比较，添加类

。

当我们在网页中单击一个链接时，浏览器会根据链接的href属性值加载相应的页面。而window.location.hash则是用来获取当前页面的URL中的锚点部分（即#后面的内容）。

要实现在单击时将href与window.location.hash进行比较并添加类，可以通过以下步骤来实现：

1. 获取所有需要添加类的链接元素，可以使用document.querySelectorAll方法，并传入相应的选择器，例如：ahref^="#"，表示选择所有href属性以#开头的a标签。
2. 遍历获取到的链接元素列表，可以使用forEach方法。
3. 在遍历的过程中，对每个链接元素进行以下操作：
   • 获取链接元素的href属性值，可以使用element.getAttribute方法。
   • 获取当前页面的锚点部分，可以使用window.location.hash。
   • 将获取到的href和hash进行比较，可以使用字符串的比较操作符（例如===）。
   • 如果href和hash相等，则给链接元素添加相应的类，可以使用element.classList.add方法。

以下是一个示例代码：

const links = document.querySelectorAll('a[href^="#"]');

links.forEach(link => {
  const href = link.getAttribute('href');
  const hash = window.location.hash;

  if (href === hash) {
    link.classList.add('active');
  }
});

在上述代码中，我们首先使用选择器'ahref^="#"'获取所有href属性以#开头的a标签，然后使用forEach方法遍历每个链接元素。在遍历的过程中，我们获取每个链接元素的href属性值和当前页面的锚点部分，然后进行比较。如果相等，则给链接元素添加active类。

这样，当我们点击一个带有锚点的链接时，对应的链接元素就会被添加active类，从而可以通过CSS样式来改变链接的外观或者实现其他交互效果。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
• 腾讯云安全加速（SA）：https://cloud.tencent.com/product/sa
• 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
• 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

请注意，以上链接仅为示例，实际使用时请根据具体需求和腾讯云的产品文档进行选择。