javascript - CSS - 事件链接更改文本

标签 javascript html css

我正在尝试创建 Accordion 链接(扩展 Accordion )

我想根据链接是否处于事件状态更改文本。例如:

DEFAULT : "View all Comments"
ACTIVE : "Hide Comments"

我知道我可以使用 CSS 来设置内容颜色、样式等的样式,但想知道是否有一种方法可以根据链接是否处于事件状态来更改链接中的实际文本。

最佳答案

.accordion-item::before { /* default text of the accordion item */
  content : "View all comment";
}

.accordion-item:focus:before { /* triggered when the accordion item is clicked/focused */
  content : "Hide Comments";
}
<a href="#" class="accordion-item"></a>

这是一个如何执行此操作的示例,假设您将有多个链接代表每个 Accordion 项。

请注意,您可以使用新的 HTML data-* 属性来自动化该过程,以防您在通过以下语言解释之前生成 HTML PhpJavaScript 如下所示:

关于javascript - CSS - 事件链接更改文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31872000/

相关文章:

javascript - Google Places 自动完成下拉菜单不可见

javascript - Laravel 5 js 被 app.js 阻塞

javascript - 如何根据屏幕宽度在 Javascript 中添加/删除类?

javascript - 在 onMouseOut 上调用 javascript 函数

html - 带有背景图像的渐变 CSS

javascript - Firebase 停止监听 onAuthStateChanged

javascript - 捕获 waitForSelector 错误

html - :target selector doesn't work with option tags

html - 在悬停一个时更改所有导航链接

jquery - 为什么我的选项卡区域底部有空格?