时间戳

首页 > 解决方案 > 用一些 JS 定位 css 类

javascript - 用一些 JS 定位 css 类

问题描述

您好，我目前在我的 wordpress 导航菜单上有这个内联 JS

<a href="https://example.com/login/" onclick="window.location = 'https://example.com/login/?redirect_to='+window.location.href; return false;">login</a>

有人告诉我最好使用常规菜单项，然后给它一个类，然后用一些 JS 定位该类。我尝试搜索示例，但找不到适合我的示例。有人可以分享一个示例代码来为我指明正确的方向吗？

谢谢

标签： javascriptcsswordpress

解决方案

我想这就是你被告知的。

var link = document.querySelector(".js-link");
link.addEventListener("click", (e) => {
  e.preventDefault();
  //do whatever you want hear
  console.log("redirect to another page");
});
<a href="http://www.google.com" class="js-link">Google</a>

你这样做的方式会使你的代码混乱，难以阅读和维护。所以我们应该将html、css和js代码分开。并且为了使您的 javascript 和样式在您更改代码时不会相互影响，您应该将要使用 javascript 的类命名为与您要设置样式的类不同。

例如，我只为 javascript 使用“js-link”类，而不是对其进行样式设置。如果我想为链接设置样式，我将为它添加另一个类。

推荐阅读