将文本添加到jquery UI选项卡控件的标题中

Pre*_*eli 5 javascript jquery jquery-ui jquery-ui-tabs

我想在jquery UI选项卡控件的标题中添加一些文本(参见图像).如果我能在右侧对齐它会很好.

在此输入图像描述

vea*_*rod 12

像这样的东西

$("#id_of_tab_element").tabs(); //init of your tabs element
var textElement = $("<span></span>");
textElement.text("text here...");
Run Code Online (Sandbox Code Playgroud)

应用样式并追加

textElement.css('position', 'absolute');
textElement.css('right', '20px');
$("#id_of_tab_element").append(textElement);
Run Code Online (Sandbox Code Playgroud)

您还可以在css中定义样式并将类应用于元素

看到这个小提琴

  • 我需要添加textElement.css('top','10px'); 让它工作. (2认同)

Sen*_*der 5

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Aenean lacinia</a></li>
       <span style="float: right;">hello</span>
</ul>
Run Code Online (Sandbox Code Playgroud)