html - 如何在不破坏功能的情况下替换锚标记上的类？(How can I replace class on anchor tag without breaking functionality?)

Question

In the code below I have anchor tag where window and less class are applied.

(在下面的代码中，我有anchor tag ，其中应用了window和less类。)

How can I remove anchor tag such that classes that are applied to anchor tags are used in the code and functionality does not break?

(如何删除锚标记，以便在代码中使用应用于锚标记的类且功能不中断？)

EDIT - Added some more code.

(编辑-添加了更多代码。)

.html file

(.html文件)

 <div class="read-window-links">

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

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

.css file

(.css文件)

.read-window-section .read-window-links a {
  text-decoration: none;
}

.read-window-section .read-window-links {
  background-color: #e6eff0;

}

.read-window-section .full-text {
  display: none;
}

.read-window-section .read-window-links  .read-window p,
.read-window-section .read-window-links .less .read-window p {
  padding: 24px;
  margin: 0px;
}

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

}

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

}

  ask by osama translate from so

Answer 1

It seems that you want the following html:

(看来您想要以下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>

I've removed the a tags and added the a classes to the child span tags.

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

Your css will no longer work because you are matching based on DOM hierarchy, not just class name.

(您的css将不再起作用，因为您是基于DOM层次结构而不只是基于类名进行匹配。)

See this article for a more in-depth treatment, but essentially in eg this section:

(有关更深入的处理，请参见本文 ，但实际上在本节中：)

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

you are saying, "set content to url(down_arrow_icon.png) and display to inline-block for a p which is a descendant of an element with class read-window which is a descendant of an element with class window which is a descendant of an element with class read-window-links ..." etc. If you change the DOM hierarchy, you need to change your css to match, which means something like

(你说的是，“将content设置为url(down_arrow_icon.png)并display为行inline-block ，而p是具有类read-window的元素的后代，它是具有class 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;
}

Notice how there is no space between .window and .read-window , which means "match an element with both .window and .read-window classes."

(请注意， .window和.read-window之间没有空格，这意味着“将元素与.window和.read-window类都匹配”。)