Question

我目前正在用HTML制作自己的元素和属性，并且已经将href标签切换为loc属性，并将其附加到三个不同的<navlink>标签上。我已经进行了设置，因此当您单击<navlink>时，它会转到loc的目的地，但是，第一个loc的{{1}}确定了所有链接的去向在页面上，这不是我想要的。我想知道是否可以使用<navlink>属性为每个navlink提供不同的链接？

这是我的HTML：

loc

还有我的jQuery：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
<body>

    <!--Navbar-->
    <navbar>
        <navlinks>

            <navlink loc="https://www.apple.com">Home</navlink>
            <navlink loc="https://www.apple.com">About</navlink>
            <navlink loc="https://www.microsoft.com">Contact</navlink>

        </navlinks>
    </navbar>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="style.js"></script>
</body>
</html>

是否有办法使每个var navlink_loc = $("navlink").attr("loc"); $('navlink').click(function(){ $(location).attr('href', navlink_loc); });都具有<navlink>属性，但转到其指定的链接？

Answer 1

使用jQuery中的$(this)设置链接，如下所示。 $(this)使选择器成为您单击的确切文本。

var navlink_loc;
$('navlink').click(function() {
  navlink_loc = $(this).attr("loc");
  $(location).attr('href', navlink_loc);
});

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!--Navbar-->
  <navbar>
    <navlinks>

      <navlink loc="https://www.apple.com">Home</navlink>
      <navlink loc="https://www.apple.com">About</navlink>
      <navlink loc="https://www.microsoft.com">Contact</navlink>

    </navlinks>
  </navbar>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="style.js"></script>
</body>

</html>

如何使自定义链接属性应用于一个元素？

1 个答案: