时间戳

首页 > 解决方案 > 如何使自定义链接属性适用于一个元素？

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

问题描述

我目前正在用 HTML 制作自己的元素和属性，并且我已将href标签切换为loc属性并将其附加到三个不同的<navlink>标签。我已经设置了它，所以当你点击它时，<navlink>它会转到loc目的地，但是，loc第一个<navlink>决定了所有链接在页面上的位置，这不是我想要的。我想知道是否可以navlink使用该loc属性为每个链接设置不同的链接？

这是我的 HTML：

<!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>

还有我的 jQuery：

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

有没有办法让每个<navlink>人都有loc属性但转到其指定的链接？

标签： jqueryhtml

解决方案

$(this)使用jQuery设置链接，如下所示。$(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>

推荐阅读