CODEWITHSUNDEEP
jquery
Joe
Joe

Reputation: 457

trouble displaying the selected tab with jQuery

I'm having a bit of trouble displaying only the selected tabbed div with a link:

<script>
$(function(){
    $('ul#tabs>li a').click(function(e){
        e.preventDefault();
        var tab = $(this).attr('href');
        $(tab).css('display', 'block');
        $(tab).siblings('div').css('display', 'none');
    })
});

</script>

and here is the HTML:

<div id="tabsBox">
    <ul id="tabs">
        <li><a href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        <li><a href="#c">C</a></li>
    </ul>
    <div id="#a">A content</div>
    <div id="#b">B content</div>
    <div id="#c">C content</div>
</div>

It's here in this JSFiddle http://jsfiddle.net/9xrjD/

does any one have any idea why it's not working?

Upvotes: 0

Views: 42

Answers (2)

dsgriffin
dsgriffin

Reputation: 68566

jsFiddle here.

Replace 

<div id="#a">A content</div>
<div id="#b">B content</div>
<div id="#c">C content</div>

With

<div id="a">A content</div>
<div id="b">B content</div>
<div id="c">C content</div>

Your function does work, however you weren't actually hiding your <div>'s in the CSS.

#a, #b, #c {
  display: none;
}

Will hide all elements with the ID's a, b and c - not #a, #b and #c.

Upvotes: 1

pandavenger
pandavenger

Reputation: 1027

You put #a instead of a in your id, as # is already used to define an id you don't need it in the html id=

fixed jsfiddle http://jsfiddle.net/9xrjD/2/

Upvotes: 2

Related Questions