锚标记href函数

Posted 2023-03-05

【中文标题】锚标记href函数

【英文标题】：Anchor Tag href functions

【发布时间】：2020-10-13 23:29:20

【问题描述】：

我正在尝试创建一个函数来查找锚标记指向的元素的 id，并将类附加到该元素。我需要这是 vanilla js 而不是 jquery。

例如：

<div id="firstDiv"></div>

<div> Destination </div>
<div> Destination #2 </div>

我们的想法是，一旦您单击锚标记，它会将您带到 div 并将一个类附加到该 div 以启动一个函数。

我编写的脚本运行循环，从 javascript 对象中添加 href 属性和 id 属性的值。见下文：

var rooms = [

id: 1,
name: Example,
,

id:2,
name: Example #2,

]

         for ( x in rooms ) 
           var i = document.getElementById("firstDiv");
           var a = document.createElement("a");
           i.appendChild(a);
           a.href = "#" + rooms[x].id;
           a.innerhtml += rooms[x].name + "<br>";
           a.classList.add("show");
          
        

        var rect = document.getElementsByTagName("rect");
        for ( i = 0; i < rect.length; i++ ) 
           rect[i].setAttribute("id", rooms[i].id);
         

输出：

<div id="firstDiv">
<a href="#1"> Example </a>
<a href="#2"> Example #2 </a>
</div>

<div id="1"> Destination </div>
<div id="2"> Destination #2 </div>

下面的函数是我希望该函数在单击 a 标签时对每个相应的 div 执行的操作的示例。

function attach() 
var div = document.getElementById(rooms[i].id);
div.classList.toggle("active");

关于如何根据我的特殊需要正确编写此函数的任何建议。 for 循环是否最适合这个或 if/else 语句。我都试过了，但都没有成功。

如果我需要进一步澄清，请告诉我。

【问题讨论】：

您的初始 HTML 示例不包含锚点。

锚标签由第一个for循环创建

为什么要在锚标记中添加 BR？使用 CSS。

【参考方案1】：

看来这就是您要问的问题。见内联 cmets。

document.addEventListener("click", function(event)
  // First, check to see if it was an anchor that was clicked
  // in the document
  if(event.target.nodeName === "A")
    // If so, add a class to the target 
    // Get the href attribute and strip off the "#", then find that element and toggle the class
  document.getElementById(event.target.getAttribute("href").replace("#","")).classList.toggle("highlight");
  
);

.highlight  background-color:yellow; 

<div id="firstDiv">
  <a href="#one"> Example </a>
  <a href="#two"> Example #2 </a>
</div>

<div id="one"> Destination </div>
<div id="two"> Destination #2 </div>

【讨论】：

我想这可能就是我想要的。我是否可以将 if 语句中的“A”替换为 js 对象，例如 room[i].id？或者我是否需要将 if 语句放在某种 for 循环中？对不起，我是一个 JavaScript 菜鸟

【参考方案2】：

试试这个：

let anchors = document.querySelectorAll("#firstDiv a");

for (let i = 0; i < anchors.length; i++) 
    anchors[i].addEventListener("click", () => 
        var div = document.getElementById(rooms[i].id);
        div.classList.toggle("active");

【参考方案3】：

你快到了，你只需要为锚标记添加一个 onclick 属性，现在你可以或不能使用第三个附加功能。我将两个实现都包括在内，供你参考。

for ( x in rooms ) 
       var i = document.getElementById("firstDiv");
       var a = document.createElement("a");
       i.appendChild(a);
       a.href = "#" + rooms[x].id;
       a.innerHTML += rooms[x].name + "<br>";
       a.classList.add("show");
       a.onClick=`document.getElementById($rooms[x].id).classList.toggle("active")`;
    

如果你想拥有一个专门的功能，你的循环就变成了

for ( x in rooms ) 
       var i = document.getElementById("firstDiv");
       var a = document.createElement("a");
       i.appendChild(a);
       a.href = "#" + rooms[x].id;
       a.innerHTML += rooms[x].name + "<br>";
       a.classList.add("show");
       a.onClick=`attach($rooms[x].id)`;
    

然后你的附加函数变成：

function attach(id) 
 var div = document.getElementById(id);
 div.classList.toggle("active");
  

如果您有任何问题，请告诉我。

【参考方案4】：

仅 CSS ?

这个有点跑题了，不过你可以使用:target选择器来设置对应id的样式不用JS。

/* element with an id matching the URL fragment */
:target 
   background: gold;  


/* you can combine target with other selectors */
#c:target 
   background: orange




/* just a bit of styling */
a,div 
  padding: .5rem;
  display: block;
  width: 20%;
  float:left;

<a href="#a">Link to A</a>
<a href="#b">Link to B</a>
<a href="#c">Link to C</a>
<a href="#d">Link to D</a>

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>