如何獲得我想要jQuery的默認選項卡動態appnd數據選擇選項卡

的URL ，但我怎樣才能獲得所選擇的選項卡如何獲得我想要jQuery的默認選項卡動態appnd數據選擇選項卡

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/

來源

2012-05-10 Muhammad Usman

附加此代碼的文本：

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

這裏是的jsfiddle鏈接..

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

如果您要添加文本在標籤頭：

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

來源

2012-05-10 07:12:00 pradip

嘗試類似：

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

剛剛輸入沒有經過測試

來源

2012-05-10 07:04:48 jbduzan

你可以選擇的選項卡的索引，用...

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

...並與相應的映射它HTML元素。

或者，你可以添加/刪除選定的選項卡上自己的自定義類，並選擇它通過類

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

編輯：其實jQuery的可能會添加所選選項卡上自己的班級。這只是沒有清楚記錄在任何地方。嘗試檢查瀏覽器上的元素以查找該類。

來源

2012-05-10 07:04:49 supertopi

查看我的回答。我反向設計插件以獲取這些信息，並一直在使用該方法。然而，直到現在我才意識到你可以調用'$ tabs.tabs'並使用API。我將不得不玩這個。 +1教我新的東西！ – jmort253

當您單擊某個選項卡時，類「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-10 07:10:09 jmort253

我不知道如果你想獲得選定的選項卡的網址或追加te xt在選定的選項卡的面板中。
如果您想從選定的選項卡中獲取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-10 07:33:10

如何獲得我想要jQuery的默認選項卡動態appnd數據選擇選項卡

回答

相關問題