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/

タブ ヘッドにテキストを追加する場合:

$(".ui-tabs-selected").append("Bla Bla!!!");
于 2012-05-10T07:12:00.747 に答える
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 に答える
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 に答える
1

選択したタブのURLを取得するのか、選択したタブのパネルにテキストを追加するのかわかりません。
選択したタブからURLを取得する場合、検索するのはui-tabs-selectedという名前のjQueryUIタブクラスです。
ただし、選択したタブパネルにテキストを追加する場合、検索するクラスは「ui-tab-hide」です（または検索しないでください）。以下は2番目のオプションのコードです。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 に答える
1

次のようなものを試してください：

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

入力しただけでテストされていません

于 2012-05-10T07:04:48.063 に答える