单击 link 时在不同的隐藏 div 上显示 href link

Question

我在很多地方都没有看到这个问题，不知道是否可能，但是我有没有可能在网站上有一个 link 但是当我按下 link 时网站在我的网站上打开 div?

我想要这个的原因是因为我的网站上有文章，而不是打开文章本身我希望它是当我点击文章时它应该在隐藏的 div 中打开通常，但在点击文章时显示完整文章

`document.querySelectorAll('.title').forEach((item) => {
  item.addEventListener('click', (event) => {
    var get_href = document.querySelectorAll('.title').getAttribute('href')
    event.preventDefault()
    alert('get_href')
  })
})

Answer 1

您可以使用 AJAX 和 JavaScript 创建它。

首先，

检测到对 link、(addEventListener)
然后取消事件，这样用户就不会被重定向到 link、(event.preventDefault())
抓住 link 和 (getAttribute('href'))
将其加载到您的页面上。

我不确定你到底想用它做什么，但我认为最简单的方法是创建一个 iFrame 并将 link 设置为 URL，否则你CORS 可能会出现问题（如果该页面位于不同的 URL 并且您不拥有其他页面）。

document.addEventListener('click', function(event) {
   if(event.target.matches('a[href]')) {
      event.preventDefault();
      var url = event.target.getAttribute('href');
      // Do whatever you want, create/open a div, ...
   }
});

以下是将网站加载到 iframe 的示例：https://jsfiddle.net/1hefuLrs/

单击 link 时在不同的隐藏 div 上显示 href link

Show a href link on a different hidden div when link is clicked

javascript

css

php

wordpress

elementor