Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
     
    <script type="text/javascript">
        $(function () {
            // add_tab button: just opens the another page
            $( "#add_tab" ).button().click(function(event) {
                event.preventDefault();
                // just a new page with link Oracle Site
                addTab( 'http://jsbin.com/uvuket/1/' );
                return false;               
            });
​
            $(this).click(function(e){  
                // just get the href inside the iframe
                $('iframe').contents().find("a").click(function(event){ 
                    event.preventDefault();
                    var url = $(event.currentTarget).attr("href");
                    addTab( url );
                    return false; 
                });
            });
​
            tabs = $("#tabs").tabs();
            tabCounter = 1;         
​
            // To create new tabs
            function addTab( url ) {
                tabCounter++;
                var tabTemplate = "<li><a href='#{href}'>New Tab</a></li>";
                var id = "tabs-" + tabCounter,
                    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id)),
                    tabContentHtml = '<iframe src="' + url + '" width="100%" height="300" scrolling="auto" frameborder="no"></iframe>';
                tabs.find(".ui-tabs-nav").append(li);
                tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
                tabs.tabs("refresh");
                // Select the new tab added
                tabs.tabs('option', 'active', -1);
            }
        });         
    </script>       
</head>
<body>
    <button id="add_tab">Add Tab</button>
    <div>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First Tab</a></li>
            </ul>
            <div id="tabs-1"></div>
        </div>
    </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers