jquery custom tabs not working
I have a real simple script, where the user clicks 开发者_C百科on a link, a div displays and all other divs in the container are hidden. Yet, when I click, it does not hide anything in the below code and firebug does not report any errors either:
javascript:
$(document).ready(function()
{
var linksToInt = {
"#pple": 0,
"#serv": 1,
"#sol": 2
}
$("a.div-link").click(function(){displayDiv($(this).attr("href"));});
function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}
function on_btn_click(displayDiv){
displayDiv != null ? null : this;
switch(displayDiv){
case 0:
function(){$("#content > div").hide(); $(displayDiv).show();};
break;
case 1:
function(){$("#content > div").hide(); $(displayDiv).show();};
break;
case 2:
function(){$("#content > div").hide(); $(displayDiv).show();};
break;
case 3:
function(){$("#content > div").hide(); $(displayDiv).show();};
break;
}
});
markup:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="application.js"></script>
</HEAD>
<BODY>
<div id="sideLinks">
<ul id="tabAbout">
<li><a href="#pple" class="div-link">People</a></li>
<li><a href="#serv" class="div-link">Service</a></li>
<li><a href="#sol" class="div-link">Solutions</a></li>
</ul>
</div>
<div id="content">
<div class="tabContent" id="pple">
<p>
Content
</p>
</div>
<div class="tabContent" id="serv">
<p>
Content
</p>
</div>
<div class="tabContent" id="sol">
<p>
Content
</p>
</div>
</div>
</BODY>
</HTML>
Thanks for any response.
Instead of having the switch function to hide the other divs, you can use jQuery's .siblings function to get everything other than the desired div. I am doing something similar in a project of mine, and that is how I did it.
My code using the .siblings is this:
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
and my code to change the displayed div
selection = $(this).attr("id");
$(this).addClass('selected');
$("div#"+selection).siblings().hide();
$("div#"+selection).show();
I did it a little different, I am having people click on a li to pick the item they want, but it is the same idea. I changed my 2nd code a little for you, to use the .siblings with my hide. I was using a class selector there to hide things, but I think that I could change mine to use siblings, now that I think about it.
I hope this helps you.
Edit...Let me change my code to match yours...
selection = $(this).attr("href");
$(".tabContent").hide();
$("div#"+selection).show();
So something simple like this inside your displayDiv function to do your hiding and displaying.
As simple coder said, you have a curly bracket missing on the last line.
In your on_btn_click function, your displayDiv is a number. You can't use a selector on it like you are trying to do (it will always be empty). $(1) returns nothing. Use the "#pple" instead. If you want to cache it in a variable, it would probably be better, just pick a way that will let you access both the id and the selector.
Also, the code in your on_btn_click function doesn't work. Instead of using a function in each one of the case blocks, put your code inline. Your code should look like this :
$(document).ready(function() {
var linksToInt = {
"#pple": 0,
"#serv": 1,
"#sol": 2}
$("a.div-link").click(function(){displayDiv($(this).attr("href"));});
function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}
function on_btn_click(displayDiv){
displayDiv != null ? null : this;
switch(displayDiv){
case 0:
$("#content > div").hide();
//displayDiv has a value of '0', so you can't do $(0), it won't return anything
$("#pple").show();
break;
case 1:
$("#content > div").hide();
$("#serv").show();
break;
case 2:
$("#content > div").hide();
$("#sol").show();
break;
case 3:
$("#content > div").hide();
$(displayDiv).show();
break;
}
}});
You have a bracket missing on the last line. It should be
}});
and not
});
May I suggest the jQuery UI Tabs module: http://jqueryui.com/demos/tabs/ as opposed to reinventing the wheel. It's highly customizable and easy to use.
加载中,请稍侯......
精彩评论