Tab view using jQuery

Question

The following tab view is not switching the panes for some reason. I am sure what I am doing is not wrong here but the content pane stays the same no matter which tab I click.

Here is the code

HTML

<!-- the tabs -->
<ul class="tabs">
  <li><a href="#first">Tab 1</a></li>
  <li><a href="#second">Tab 2</a></li>
  <li><a href="#third">Tab 3</a></li>
</ul>

 <!-- tab "panes" -->
 <div class="panes">
   <div><a href="#first">
    First pane.</a>
   </div>
   <div><a href="#second">
     Second pane. You can open other tabs with normal
     </a>
    </div>
    <div><a href="#third">
     Third tab content</a>
    </div>
  </div>

CSS

ul.tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
 }

 /* single tab */
 ul.tabs li {
    float:left;
     padding:0;
     margin:0;
     list-style-type:none;
  }

 /* link inside the tab. uses a background image */
 ul.tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}

 ul.tabs a:hover {
     background-color:#F7F7F7;
    color:#333;
 }

 /* selected tab */
 ul.tabs a.current {
     background-color:#ddd;
     border-bottom:1px solid #ddd;
     color:#000;
     cursor:default;
  } 


  /* tab pane */
       .panes {

          border:1px solid #666;
           border-width:0 1px 1px 1px;
           min-height:150px;
           padding:15px 20px;
           background-color:#ddd;
      }

Jquery

  $("ul.tabs").tabs("div.panes > div"); (include the jquery tools lib also)

This tab is from the this website so all the code is pretty much unchanged. All i have done is that I just removed the display:none from the .pane class, the rest is the same.

Answer 1

Try this.

<ul class="tabs">
    <ul>
        <li><a href="#first">Tab 1</a></li>
        <li><a href="#second">Tab 2</a></li>
        <li><a href="#third">Tab 3</a></li>
    </ul>

    <div id="first">First pane.</div>
    <div id="second">Second pane.</div>
    <div id="third">Third tab content</div>
</ul>

<script language="javascript">
    $(document).ready(function(e) {
        $('.tabs').tabs();
    });
</script>