html - 将单击的按钮标记为事件的

Question

给定这个 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>

这是 fiddle :Fiddle

它们看起来像:

是否有可能在单击一个按钮时它会被激活并因此具有较粗的边框或其他一些指示符。然后，如果您单击另一个按钮，那个按钮会显示为事件状态，而另一个会恢复为正常样式？

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

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

Answer 1

仅使用 CSS

.wp-switch-editor:focus-within {
    border: thin solid black;
}

<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>

使用 jQuery

$('.wp-switch-editor').on('click', function(){
  $('.wp-switch-editor').removeClass('active');
  $(this).addClass('active');
});

.active {
  border: 1px solid #000;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>