时间戳

首页 > 解决方案 > 将单击的按钮标记为活动的

html - 将单击的按钮标记为活动的

问题描述

鉴于此 HTML：

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

这是小提琴：小提琴

他们看起来像：

纽扣

是否有可能，当单击一个按钮时，它会被激活，从而具有更厚的边框或其他指示符。然后，如果您单击另一个按钮，则该按钮显示为活动状态，而另一个按钮恢复正常样式？

此外，当页面第一次显示时，它会知道哪个显示为活动的。在上下文中，这些按钮与 bbPress 支持论坛和两个编辑器之间的切换有关。

可以用 CSS 实现我想做的事情吗？

标签： htmlcsswordpressbutton

解决方案

您可以使用 :focus，但在实践中它可能不会表现出您想要的样子。我建议改用 javascript/jQuery。

.wp-editor-tabs button:focus {
  border:3px solid #000;
}
<div class="wp-editor-tabs">
  <button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
  <button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

推荐阅读