JQuery collapsible tabs problem?
I'm 开发者_JS百科fairly new to JQuery and for some reason when I add another id selector like id="a"
to my <div id="tab-1" class="form-content">
my collapsible tabs wont work how can I fix this problem so I can have multiple id selectors and my collapsible tabs will work also?
Here is the JQuery.
$(document).ready(function() {
//When page loads...
$(".form-content").hide(); //Hide all content
var firstMenu = $("#menu ul li:first");
firstMenu.show();
firstMenu.find("a").addClass("selected-link"); //Activate first tab
$(".form-content:first").show(); //Show first tab content
//On Click Event
$("#menu ul li").click(function() {
$("#menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class
$(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab
$(".form-content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content
$(activeTab).fadeIn(); //Fade in the selected-link ID content
return false;
});
});
Here is the HTML.
<div id="body-content">
<div id="menu">
<ul>
<li><a href="#tab-1" title="">tab 1</a></li>
<li><a href="#tab-2" title="">tab 2</a></li>
<li><a href="#tab-3" title="">tab 3</a></li>
<li><a href="#tab-4" title="">tab 4</a></li>
<li><a href="#tab-5" title="">tab 5</a></li>
</ul>
</div>
<div id="container">
<div id="a" id="tab-1" class="form-content">
<p>tab 1</p>
</div>
<div id="b" id="tab-2" class="form-content">
<p>tab 2</p>
</div>
<div id="c" id="tab-3" class="form-content">
<p>tab 3</p>
</div>
<div id="d" id="tab-4" class="form-content">
<p>tab 4</p>
</div>
<div id="e" id="tab-5" class="form-content">
<p>tab 5</p>
</div>
</div>
<div>
You can't give a single element 2 different "id" values. It's hard to know what it is that you're trying to achieve.
To give an element more than one "class" value, separate the values by spaces:
<div id='x' class='something something-else and-another-class whatever'>
you have 2 id attributes. You cannot have 2 id attributes in a tag. As you have a and b as the first id I think it is finding those first over you tab definitions.
If you need a and b I would suggest putting them as a class attribute and select it using $(".a")
精彩评论