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>
  <head>
    <title>Test</title>
    <script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
    <style>
    div.panes div {
            margin-top:10px;
            display:none;
            height:80px;
            width:700px;
            font-size:18px;
    }
    
    div.panes img {
            float:right;
            margin-left:20px;
    }
    </style>
  </head>
  <body>
​
  <!-- the tabs -->
  <ul class="tabs">
          <li><a href="#">Tab 1</a></li>
          <li><a href="#">Tab 2</a></li>
          <li><a href="#">Tab 3</a></li>
  </ul>
  
  <!-- tab "panes" -->
  <div class="panes">
          <div>pane 1 content</div>
          <div>pane 2 content</div>
          <div>pane 3 content</div>
  </div>
  
​
    <script type="text/javascript">      
    $(function() {
       //instantiate tabs object 
       $("ul.tabs").tabs("div.panes > div");
      
       // get handle to the api (must have been constructed before this call)
       var api = $("ul.tabs").data("tabs");
      
       // set cookie when tabs are clicked
       api.onClick(function(e, index) {
              setCookie("selectedtab", index + 1, 365);
       });     
       // retrieve cookie value on page load
       var selectedTab = getCookie("selectedtab");
    
       if (selectedTab != "undefined") {
        api.click(selectedTab);
       }
      
    });
    </script>
  </body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers