CODEWITHSUNDEEP
c#asp.netjquery
Joris
Joris

Reputation: 741

Jquery runtime error: object expected

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?

Upvotes: 2

Views: 3002

Answers (3)

Matt Smith
Matt Smith

Reputation: 1231

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?

Upvotes: 3

Glennular
Glennular

Reputation: 18215

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>

Upvotes: 3

Rob Stevenson-Leggett
Rob Stevenson-Leggett

Reputation: 35679

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.

Upvotes: 1

Related Questions