如何仅在选项卡上设置元素的轮廓，而不在单击时设置？

要在选项卡上设置元素的轮廓，而不在单击时设置，可以使用CSS的:focus伪类选择器。该选择器用于选中当前获得焦点的元素，可以通过设置其轮廓属性来实现轮廓效果。

以下是一个示例代码：

HTML:

<div class="tab">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab 2</label>
  
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab 3</label>
  
  <div class="tab-content">
    <p>Content for Tab 1</p>
  </div>
  
  <div class="tab-content">
    <p>Content for Tab 2</p>
  </div>
  
  <div class="tab-content">
    <p>Content for Tab 3</p>
  </div>
</div>

CSS:

.tab-content {
  display: none;
}

input[type="radio"]:checked + label {
  outline: 2px solid blue;
}

input[type="radio"]:focus + label {
  outline: none;
}

在上述代码中，我们使用了一组radio按钮和对应的label来创建选项卡。每个radio按钮对应一个选项卡标签，点击标签时会选中对应的radio按钮。通过CSS选择器，我们设置了选中的radio按钮的+ label元素的轮廓样式为蓝色边框。同时，我们还使用:focus伪类选择器来设置在单击时不显示轮廓。

这样，当用户点击选项卡时，选中的标签会显示蓝色边框，而在单击时不会显示轮廓。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行样式调整和交互逻辑的实现。

腾讯云相关产品和产品介绍链接地址：