ansaurus

Question

Answer 1

+1 A:

Editted as I was wrong first time :-)

Your problem is these lines:

var activeTab = $(this).find("a").attr("href"); //This will return a string value
$(activeTab).fadeIn();                             //Meaning this will fail

You need to change the selector for activeTab to get the .tab_content which you want to show.

I assume the href value is contained within the .tab_content somewhere.

Rob Stevenson-Leggett 2010-04-26 19:28:26

I don't think this is correct, he has tabs above the content, like most tab strips work, the content is in separate divs, at least I assume so since this is how almost *all* tabs work.

Nick Craver 2010-04-26 19:30:24

nope, it still gives the error.It also seems as the error occures at the$(document).ready(function() { line... but I could be wrong

Joris 2010-04-26 19:32:59

if your error occurs at the `$(document).ready(` line then my guess is you aren't correctly including jquery. make sure your urls are correct. I just put your code in a html test page with the code you show there and it works fine.

Matt Smith 2010-04-26 19:37:29

See the answer below concerning including jQuery.

Rob Stevenson-Leggett 2010-04-26 19:37:46

Answer 2

+1 A:

i think you want to remove you var from a selector

 activeTab.fadeIn(); //Fade in the active ID content

If you are getting an error @ $(document).ready(function() { remember to include the jQuery script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Glennular 2010-04-26 19:31:58

nope, still getting an error...

Joris 2010-04-26 19:34:41

Not sure about removing var. That wouldn't change anything. Including jQuery may help though.

Rob Stevenson-Leggett 2010-04-26 19:38:25

Ah! it was the ><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> that I was missing. Thank you!

Joris 2010-04-26 21:18:03

Answer 3

+3 A:

Your code works in this html page;

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

    //When page loads...
     $(".tab_content").hide(); //Hide all content
     $("ul.tabs li:first").addClass("active").show(); //Activate first tab
     $(".tab_content:first").show(); //Show first tab content

     //On Click Event
     $("ul.tabs li").click(function() {

      $("ul.tabs li").removeClass("active"); //Remove any "active" class
      $(this).addClass("active"); //Add "active" class to selected tab
      $(".tab_content").hide(); //Hide all tab content

      var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active ID content
      return false;
     });

    }); 

</script>   
</head>
<body>

    <ul class="tabs">
        <li><a href="#one">Tab One</a></li>
        <li><a href="#two">Tab Two</a></li>
    </ul>

    <div id="one" class="tab_content">Tab One Content</div>
    <div id="two" class="tab_content">Tab Two Content</div>
</body>
</html>

so it must be soemthing else other that the code you show?

Matt Smith 2010-04-26 19:39:48

ansaurus

tags:

views:

answers:

Jquery runtime error: object expected

related questions