Jquery runtime error: object expected

Question

The Jquery script that controls my tabcontainer gives an "object expected" runtime error. I honestly can't find the reason why:

$(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;
 });

});

Has it something to do with the stylesheet?

unless you provide more info about the error and where it's occuring your going to find it hard to get n answer. have you included the jQuery script file correctly. What about running the code in a stripped down html page that contains only the bare minimum elements to run? — Matt Smith
– Matt Smith, Commented Apr 26, 2010 at 19:29
Please post your markup, looks like one of your anchors points to a non-existent ID. — Nick Craver
– Nick Craver, Commented Apr 26, 2010 at 19:40

Glennular · Accepted Answer · 2010-04-26 19:37:09Z

3

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>

edited Apr 26, 2010 at 19:37

answered Apr 26, 2010 at 19:31

Glennular

18.3k9 gold badges61 silver badges77 bronze badges

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

2 Comments

Rob Stevenson-Leggett Over a year ago

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

Joris Over a year ago

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

Matt Smith · Accepted Answer · 2010-04-26 19:39:48Z

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?

Rob Stevenson-Leggett · Accepted Answer · 2010-04-26 19:36:56Z

1

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.

edited Apr 26, 2010 at 19:36

answered Apr 26, 2010 at 19:28

Rob Stevenson-Leggett

35.8k21 gold badges93 silver badges142 bronze badges

4 Comments

Nick Craver Over a year ago

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.

Joris Over a year ago

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

Matt Smith Over a year ago

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.

Rob Stevenson-Leggett Over a year ago

See the answer below concerning including jQuery.

Collectives™ on Stack Overflow

Jquery runtime error: object expected

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related