Question

我想在Jquery默认选项卡中动态追加数据但我如何获得所选标签

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">         </script>
 </head>
<body style="font-size:62.5%;">

<div id="tabs">
   <ul>
</ul>
</div>
<input type='button' id='addTab' value='Add Tab'>
<input type='button' id='appendText' value='Add Text in Tab'>

</body>
</html>

JS：

 $(document).ready(function() {
$("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>"
    });
 });

$(function() {
var index = 0;
$("#addTab").live('click', function() {
    index++;
    var title = 'Tab.....  ' + index;
    var url = '#fragment-' + index;


    addTab(url, title, index);

});

function addTab(url, title, index) {

    $('#tabs').tabs("add", url, title, [index]);
}
$('#removeTab').live('click', function() {
selected = $('p[id=removeTab]').index(this);
    $('#tabs').tabs("remove", [selected]);
});


 $('#appendText').live('click', function() {
    //fragment-1 is hardcoded I want to get the url of tab by clicking on it...  
    $('#fragment-1').append("Bla Bla!!!");
});


});

JS小提琴http://jsfiddle.net/k44Wk/2/

Answer 1

使用以下代码附加文本：

$(".ui-tabs-panel").not(".ui-tabs-hide").append("Bla Bla!!!");

这是JSFiddle Link ..

http://jsfiddle.net/k44Wk/4/

如果要在标题栏中添加文字：

$(".ui-tabs-selected").append("Bla Bla!!!");

Answer 2

您可以使用...

获取所选标签的索引

var selected = $tabs.tabs('option', 'selected'); // selected tab index integer

...并将其与相应的HTML元素映射。

或者，您可以在所选选项卡上添加/删除自己的自定义类，并通过该类选择它

var url = $('.mySelectedTab').child('a').attr('href');

编辑：实际上jQuery可能会在所选标签上添加自己的类。它没有在任何地方清楚地记录。尝试检查浏览器上的元素以找到该类。

Answer 3

单击选项卡时，将对其应用类“ui-state-active”，同时从先前活动的选项卡中删除该类。知道了这一点，您可以在CSS选择器中使用此类来定位它以添加内容。

或者，您也可以使用“ui-tabs-selected”类。

jQuery标签HTML：

<!-- Tab1: See "ui-state-active" at the end of the class list -->
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fragment-1">Tab.....  1</a> <p title="close" id="removeTab" style="cursor:pointer;display:inline">x</p></li>

<!-- Tab2: ui-state-active won't appear here until you click the 2nd tab -->
<li class="ui-state-default ui-corner-top"><a href="#fragment-2">Tab.....  2</a> <p title="close" id="removeTab" style="cursor:pointer;display:inline">x</p></li>

<强> JavaScript的：

// get selected tab, either #fragment-1, #fragment-2, or #fragment-3
var id = $('#tabs').find('.ui-state-active).find("a").attr("href"); 

// now use that id to get a reference to the selected body
$('div'+id).append("Bla!!");

当然，很可能有一个API可以更方便地访问这些信息。但是，这是一种更低级的方法，可以帮助您了解jQuery选项卡的工作原理。

Answer 4

尝试类似：

$('#tabs li').click(function(){
   console.log($(this).children('a').attr('href'));
});

刚输入未经测试

Answer 5

我不知道您是否想要获取所选标签的网址或将文字附加到所选标签面板中。
如果你想从选定的标签中获取url，那么要查找的是jQueryUI选项卡类：ui-tabs-selected。
但是，如果要将文本附加到选定的选项卡面板，要查找的类是“ui-tab-hide”（或者不是要查找）。下面是第二个选项的代码。 http://jsfiddle.net/gP3YZ/

$('#appendText').live('click', function() {
//iterate through all tab panels.
    $('#tabs .ui-tabs-panel').each(function(index) {
         //check if the tab is not hidden, i.e. disregard all hidden tabs.
         if(!($(this).hasClass('ui-tabs-hide'))){
             //do the dew!
             $(this).append("Bla Bla!!!");
             return;
         }
    });
});

如何获取所选Tab的URL

5 个答案: