Home/ Questions/Q 7913293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T13:48:29+00:00

I want to appnd data dynamically in Jquery default tabs but How I can

  • 0

I want to appnd data dynamically in Jquery default tabs
but How I can get the selected tab

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 Fiddle http://jsfiddle.net/k44Wk/2/
​
​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Append the text with this code:

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

    Here is the JSFiddle Link..

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

    If you want to add Text in Tab Head:

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