Question

我希望用户看到文本是可点击的。截至目前，我已将光标更改为指针，并在<span>元素的文本上添加了下划线，我还尝试了不同的边框和文本高亮（基本上改变了颜色），但我无法做到看起来不错。

我正在使用bootstrap中的panel panel-primary，我知道他们也有一个Tabs组件，但由于其他原因我无法使用它。

<div class="panel panel-primary" >
    <div class="panel-heading"> SomeHeading <span style="text-decoration: underline; cursor: pointer" >Tab1</span> <span style="font-size: 8px;" class="badge">1</span> / <span style="text-decoration: underline; cursor: pointer">Tab2</span> <span style="font-size: 8px;" class="badge">3</span> 
</div> 

<div class="panel-body">
  Some content here
</div>

我还能做些什么来让用户明白这些实际上是标签？

Answer 1

我希望用户看到文本是可点击的。截至目前我有将光标更改为指针，并在文本上添加下划线元件。

这些都是非常标准的惯例。其他视觉提示（通常在:hover上激活）可能包括：

使用font-weight:bold
更改文字的color
更改文字的background-color
更改文字的border

你甚至可以：

为文字text-shadow
将包含元素的文字box-shadow

Answer 2

除了what Rounin said,，您还可以添加border：

border-style: groove; border-color: #3377ff;

查看新的plunk。

编辑：我意识到他也提到了边界。

css可视化该元素是可点击的（如标签）

2 个答案: