JavaScript Programming JavaScript > Code Examples Add a tab to tab panel Add a tab to tab panel <!doctype html> <html lang="en"> <head> <title>Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.tabs.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function(){ //create the tabs $("#tabs").tabs(); //add click handler for 'remove' button $("#remove").click(function() { //get the index to remove var indexNumber = $("#indexNum").val() - 1; //remove the tab $("#tabs").tabs("remove", indexNumber); }); //add click handler for 'add' button $("#add").click(function() { //define tab label var newLabel = "A New Tab!" //add the new tab $("#tabs").tabs("add", "#newTab", newLabel); }); }); </script> </head> <body> <label>Enter a tab index number to remove:</label><input id="indexNum"><button id="remove">Remove!</button><br><br> <button id="add">Add a new tab!</button><br><br> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">quotes 1</a></li> <li><a href="#tabs-2">quotes 2</a></li> <li><a href="#tabs-3">quotes 3</a></li> </ul> <div id="tabs-1"> <p> We come to love not by finding a perfect person, <br /> but by learning to see an imperfect person perfectly. <br /> <br /> <b>Sam Keen</b> </p> </div> <div id="tabs-2"> <p> Where love is, no room is too small. <br /> <br /> <b>Talmud</b></p> </div> <div id="tabs-3"> <p> To love abundantly is to live abundantly, <br /> and to love forever is to live forever. <br /> <br /> <b>Henry Drummond</b> </p> <p> I am you and you are love and that is what makes the world go 'round. <br /> <br /> <b>Clive Barker</b></p> </div> </div> </div> </body> </html>
