如何从元素内部选择引导选项卡的文本

Question

我很难搞清楚这一点，我需要允许选择选项卡的文本（在本例中为第1页），我尝试使用draggable = false，这只适用于Firefox，但不适用于IE或铬。

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" id="id1" href="#tab1" draggable="false">Page 1<span class="closeIcon"></span></a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="well tab-pane active"><p>Content 1</p></div>
</div>

http://jsfiddle.net/997bd1ko/3/

Answer 1

您是否尝试过在HTML中拖动链接（比如说Chrome）？结果是你在鼠标上得到一个代表链接的对象：

如果您在标签的-webkit-user-drag: none;标记上覆盖-webkit-user-drag: inherit; <a>，则会发现完全相同的行为。

那么你在通常情况下做什么？开始从链接旁边拖动...因此你看到的是一种行为。

更新

一些自定义CSS怎么样？看看这个更新的小提琴：DEMO

<li class="active">
     <p class="p-tab" data-toggle="tab" id="id1" href="#tab1" draggable="false">Page 1
         <span class="closeIcon"></span>
     </p>
</li>

<强> CSS

.p-tab {
    -webkit-user-drag: inherit;
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default;
    margin: 0;
    padding: 10px 15px;
    cursor: pointer; /*optional*/
}

我已使用段落（<a>）替换了标签中的链接<p>标记，并为其添加了自举应用于该链接的自定义CSS。相同的外观，相同的行为但可选择=）希望这有帮助。

快乐的编码！