jquery 自定义选项卡不工作
我有一个非常简单的脚本，用户单击链接，显示一个 div，而容器中的所有其他 div 都被隐藏。然而，当我单击时，它不会隐藏下面代码中的任何内容，并且 firebug 也不会报告任何错误：
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>
感谢您的任何回复。
I have a real simple script, where the user clicks 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以使用 jQuery 的 .siblings 函数来获取除所需 div 之外的所有内容，而不是使用 switch 函数来隐藏其他 div。我在我的一个项目中正在做类似的事情，我就是这样做的。
我使用 .siblings 的代码是这样的：
我的代码更改显示的 div
我做的有点不同，我让人们单击 li 来选择他们想要的项目，但这是相同的想法。我为您更改了第二个代码，以便将 .siblings 与我的隐藏一起使用。我在那里使用类选择器来隐藏一些东西，但我想我可以改变我的类选择器以使用兄弟姐妹，现在我想到了这一点。
我希望这对你有帮助。
编辑...让我更改我的代码以匹配您的代码...
因此，在您的 displayDiv 函数中执行类似这样的简单操作来执行隐藏和显示。
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:
and my code to change the displayed div
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...
So something simple like this inside your displayDiv function to do your hiding and displaying.
正如简单的编码员所说，最后一行缺少一个大括号。
在您的 on_btn_click 函数中，您的 displayDiv 是一个数字。您不能像您尝试那样在其上使用选择器（它将始终为空）。 $(1) 什么也不返回。请改用“#pple”。如果您想将其缓存在变量中，可能会更好，只需选择一种可以让您访问 id 和选择器的方法即可。
此外， on_btn_click 函数中的代码不起作用。不要在每个 case 块中使用函数，而是将代码内联。您的代码应如下所示：
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 :
最后一行缺少括号。应该是
，而不是
我可以建议使用 jQuery UI 选项卡模块： http://jqueryui.com/demos/tabs / 而不是重新发明轮子。它高度可定制且易于使用。
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.