css 如何使链接不可点击时,该链接上的用户

g2ieeal7  于 2023-03-24  发布在  其他
关注(0)|答案(5)|浏览(188)

我有一个页脚菜单,它只是一个ul.该ul包含到其他网站页面的href.有没有办法检查,如果一个用户在这个页面之一,并使该链接无法点击在所有?我知道我需要应用样式:user_on_it{ pointer-events: none; }但不知道如何检查
我累了::before::after的东西,但没有maange合并在一个工作代码

t40tm48m

t40tm48m1#

下面是一个如何使用Javascript实现此功能的示例,并带有一些注解来解释代码:

// get current URL
var currentPageUrl = window.location.href;

// loop through each link (you can query links with your classes, it's just an example)
document.querySelectorAll('a').forEach(function(link) {
  // get the link's URL
  var linkHref = link.getAttribute('href');
  
  // compare the current URL and link's URL
  if (currentPageUrl === linkHref) {
    // add the CSS class to disable link
    link.classList.add('user_on_it');
  }
});
jaxagkaj

jaxagkaj2#

要实现这一点,您需要检查页面的当前URL,并将其与页脚中链接的URL进行比较。如果它们匹配,您可以使用CSS禁用该链接。

const currentUrl = window.location.href;

const footerLinks = document.querySelectorAll('footer ul li a');

footerLinks.forEach(link => {
  if (link.href === currentUrl) {
    link.classList.add('user_on_it');
  }
});
hc8w905p

hc8w905p3#

您可以使用window.location.href检查当前页面的URL,并将禁用的类分配给所需的链接。
例如,我在这里检查当前页面URL是否包含stack overflow关键字,然后禁用Google链接。

const gLink = document.getElementById('google');
!gLink.classList.contains('disabled') && window.location.href.includes("stack") ? gLink.classList.add('disabled') : gLink.classList.remove('disabled')
a.disabled {
  pointer-events: none;
  opacity: 0.5;
  text-decoration: none;
}
<a href="#" id="google">Google Link</a>
<a href="#" id="so">SO Link</a>
ioekq8ef

ioekq8ef4#

You can check the element `href` and compare it with `window.location.href`

x一个一个一个一个x一个一个二个x

r7knjye2

r7knjye25#

要进行检查,您需要使用以下命令获取用户的位置:

const url = window.location.href;

相关问题