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.

Do you get any error messages in console?

Chris Baker
– Chris Baker

2012-08-02 19:14:07 +00:00
Commented Aug 2, 2012 at 19:14 — Chris Baker
– Chris Baker, Commented Aug 2, 2012 at 19:14
I dont have a console. I am running it in notepad++

user1535882
– user1535882

2012-08-02 19:19:49 +00:00
Commented Aug 2, 2012 at 19:19 — user1535882
– user1535882, Commented Aug 2, 2012 at 19:19
your code does work jsfiddle.net/RYYGu

vittore
– vittore

2012-08-02 19:23:08 +00:00
Commented Aug 2, 2012 at 19:23 — vittore
– vittore, Commented Aug 2, 2012 at 19:23
its a big joke thats why its not working for me

user1535882
– user1535882

2012-08-02 19:35:25 +00:00
Commented Aug 2, 2012 at 19:35 — user1535882
– user1535882, Commented Aug 2, 2012 at 19:35

André · Accepted Answer · 2012-08-02 19:25:32Z

2

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>

answered Aug 2, 2012 at 19:25

André

361 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

user1535882 Over a year ago

it truly is strange. its working in jsfiddle but not in google chrome or in IE.

Collectives™ on Stack Overflow

Tab view using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related