Jquery tabs not working

Page 1 of 1

1 Replies - 6334 Views - Last Post: 10 May 2010 - 11:46 AM

#1 [email protected]   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Jquery tabs not working

Posted 08 May 2010 - 01:55 PM

I've gone through this a few times and can't figure out what's broken. The default div should be the only div showing up and then the user should be able to click tab 2 or tab 3 to show those divs. Pretty basic and the code seems simple as well, but it's displaying everything for me (not hiding) and the links do nothing.

This is for a wordpress site if that matters... Thanks for taking a look!

css:
#wrapper {
    width:250px;
}
ul.tabs {
    width:250px;
    margin:0;
    padding:0;
}
ul.tabs li {
    display:block;
    float:left;
    padding:0 5px;
}
ul.tabs li a {
    display:block;
    float:left;
    padding:5px;
    font-size:0.8em;
    background-color:#e0e0e0;
    color:#666;
    text-decoration:none;
}
.selected {
    font-weight:bold;
}
.tab-content {
    clear:both;
    border:1px solid #ddd;
    padding:10px;
}


jquery:
<script type="text/javascript">
$(document).ready(function() {
 
	$('.tabs a').click(function(){
		switch_tabs($(this));
	});
 
	switch_tabs($('.defaulttab'));
 
});
 
function switch_tabs(obj)
{
	$('.tab-content').hide();
	$('.tabs a').removeClass("selected");
	var id = obj.attr("rel");
 
	$('#'+id).show();
	obj.addClass("selected");
}
</script>


html
<div id="wrapper">
    <ul class="tabs">
        <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
        <li><a href="#" rel="tabs2">Tab #2</a></li>
        <li><a href="#" rel="tabs3">Tab #3</a></li>
    </ul>
 
    <div class="tab-content" id="tabs1">Tab #1 content</div>
    <div class="tab-content" id="tabs2">Tab #2 content</div>
    <div class="tab-content" id="tabs3">Tab #3 content</div>
</div>


Is This A Good Question/Topic? 0
  • +

Replies To: Jquery tabs not working

#2 JITHU   User is offline

  • D.I.C Head
  • member icon

Reputation: 62
  • View blog
  • Posts: 201
  • Joined: 02-July 07

Re: Jquery tabs not working

Posted 10 May 2010 - 11:46 AM

In order to use jQuery, you've to reference the jQuery.js file in your html file.
Some thing like this:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" />  <!-- linking to the jQuery script file -->
<link rel="Stylesheet" href="style.css" />
    
<script type="text/javascript">
$(document).ready(function() {
 
        $('.tabs a').click(function(){
                switch_tabs($(this));
        });

        switch_tabs($('.defaulttab'));
 
});
 
function switch_tabs(obj)
{
        $('.tab-content').hide();
        $('.tabs a').removeClass("selected");
        var id = obj.attr("rel");
 
        $('#'+id).show();
        obj.addClass("selected");
}
</script>
</head>

<body>
    
<div id="wrapper">
    <ul class="tabs">
        <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
        <li><a href="#" rel="tabs2">Tab #2</a></li>
        <li><a href="#" rel="tabs3">Tab #3</a></li>
    </ul>
 
    <div class="tab-content" id="tabs1">Tab #1 content</div>
    <div class="tab-content" id="tabs2">Tab #2 content</div>
    <div class="tab-content" id="tabs3">Tab #3 content</div>
</div>
    
    
</body>

</html>


Hope it helps you.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1