3

我想在 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/ ​ ​</p>

4

5 回答 5

3

使用以下代码附加文本：

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

这是JSFiddle链接..

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

如果要在 Tab Head 中添加文本：

$(".ui-tabs-selected").append("Bla Bla!!!");
于 2012-05-10T07:12:00.747 回答
2

您可以使用...获取所选选项卡的索引

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

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

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

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

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

于 2012-05-10T07:04:49.547 回答
2

当您单击一个选项卡时，“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 选项卡的工作原理。

于 2012-05-10T07:10:09.420 回答
1

尝试类似：

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

刚打字没测试

于 2012-05-10T07:04:48.063 回答
1

我不知道您是要获取选定选项卡的 url 还是在选定选项卡的面板中附加文本。
如果您想从选定的选项卡中获取 url，则要查找的是名为：ui-tabs-selected 的 jQueryUI 选项卡类。
但是，如果您想将文本附加到选定的选项卡面板，则要查找的类是“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;
         }
    });
});
于 2012-05-10T07:33:10.343 回答