html - 如何在不破坏功能的情况下替换 anchor 标记上的类？

Question

在下面的代码中，我有 anchor 标签，其中应用了 window 和 less 类。我如何删除 anchor 标记，以便在代码和功能中使用应用于 anchor 标记的类

Answer 1

您似乎想要以下 html:

 <div class="read-window-links">
    <span class="read-window window">
        <p>${properties.readText}</p>
    </span>

    <span class="read-window less hidden">
        <p>${properties.readLessLinkText}</p>
    </span>
</div>

我删除了 a 标签并将 a 类添加到子 span 标签。

您的 css 将不再有效，因为您是基于 DOM 层次结构进行匹配，而不仅仅是类名。参见 this article进行更深入的治疗，但主要是在例如。本节:

.read-window-section .read-window-links .window .read-window p:after {
  content: url(down_arrow_icon.png);
  display: inline-block;
}

你是说，“将 content 设置为 url(down_arrow_icon.png) 并将 display 设置为 inline-block 对于 p，它是 read-window 类元素的后代，它是 window 类元素的后代，它是一个具有 read-window-links 类的元素的后代...”等。如果更改 DOM 层次结构，则需要更改 css 以匹配，这意味着类似

<span class="read-window window">
    <p>${properties.readText}</p>
</span>

.read-window-section .read-window-links .window.read-window p:after {
  content: url(down_arrow_icon.png);
  display: inline-block;
}

注意 .window 和 .read-window 之间没有空格，这意味着“匹配一个元素同时具有 .window 和.read-window 类。”