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> 
<script src="http://www.apus.edu/bin/b/v/jquery_v1.3.2.js" type="text/javascript"></script> 
<script src="http://www.apus.edu/bin/h/a/jquery-ui.min.js"></script> 
<link href="http://www.apus.edu/bin/j/t/tabs.css" rel="stylesheet" type="text/css" media="print, projection, screen"> 
 
<script type="text/javascript"> 
  
    $(document).ready(function() {
   
        var $tabs = $("#container-1").tabs();
      
        
      
        var changeTab = function(ev){
        
          ev.preventDefault();
          
          var tabIndex = this.hash.charAt(this.hash.length-1) -1;
        
          $tabs.tabs('select', tabIndex);
          
         };
        
        
        $('a.tablink').click(changeTab);
      
    });
  
  
  
</script> 
 
</head> 
 
<body> 
 
<h2>Testing Tabs</h2>
​
<div id="container-1"> 
    <ul> 
        <li><a href="#fragment-1"><span>Tab 1</span></a></li> 
        <li><a href="#fragment-2"><span>Tab 2</span></a></li> 
        <li><a href="#fragment-3"><span>Tab 3</span></a></li> 
        <li><a href="#fragment-4"><span>Tab 4</span></a></li> 
    </ul>
    <div id="fragment-1"> 
        <h2>Tab 1</h2> 
      i <a href="#fragment-2" class="tablink">want this text</a> to link to tab 2<BR>
      i <a href="#fragment-3" class="tablink">want this text</a> to link to tab 3<BR>
      i <a href="#fragment-4" class="tablink">want this text</a> to link to tab 4<BR>
    </div> 
    <div id="fragment-2"> 
        <h2>Tab 2</h2> 
      i <a href="#fragment-1" class="tablink">want this text</a> to link to tab 1<BR>
      i <a href="#fragment-3" class="tablink">want this text</a> to link to tab 3<BR>
      i <a href="#fragment-4" class="tablink">want this text</a> to link to tab 4<BR>
    </div> 
    <div id="fragment-3"> 
        <h2>Tab 3</h2> 
      i <a href="#fragment-1" class="tablink">want this text</a> to link to tab 1<BR>
      i <a href="#fragment-2" class="tablink">want this text</a> to link to tab 2<BR>
      i <a href="#fragment-4" class="tablink">want this text</a> to link to tab 4<BR>
    </div> 
    <div id="fragment-4"> 
        <h2>Tab 4</h2> 
      i <a href="#fragment-1" class="tablink">want this text</a> to link to tab 1<BR>
      i <a href="#fragment-2" class="tablink">want this text</a> to link to tab 2<BR>
      i <a href="#fragment-3" class="tablink">want this text</a> to link to tab 3<BR>
    </div> 
</div>
​
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers