Question

我有一个非常简单的脚本，用户点击链接，显示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;
}

});

标记：

<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>

感谢您的回复。

Answer 1

您可以使用jQuery的.siblings函数来获取除所需div之外的所有内容，而不是使用switch函数来隐藏其他div。我在我的一个项目中做了类似的事情，这就是我做的事情。

使用.siblings的代码是：

$(this).siblings().removeClass('selected');
$(this).addClass('selected');

和我的代码来更改显示的div

selection = $(this).attr("id");
$(this).addClass('selected');
$("div#"+selection).siblings().hide();
$("div#"+selection).show();

我做的有点不同，我让人们点击li来选择他们想要的项目，但这是同样的想法。我为你改变了我的第二个代码，使用.siblings和我的隐藏。我在那里使用了一个类选择器来隐藏东西，但我认为我可以改变我的兄弟姐妹，现在我想起来了。

我希望这会对你有所帮助。

编辑...让我更改我的代码以匹配你的......

    selection = $(this).attr("href");
    $(".tabContent").hide();
    $("div#"+selection).show();

在displayDiv函数中有这么简单的东西可以隐藏和显示。

Answer 2

最后一行中缺少括号。它应该是

}});

而不是

});

我可以建议使用jQuery UI Tabs模块：http://jqueryui.com/demos/tabs/而不是重新发明轮子。它高度可定制且易于使用。

Answer 3

简单的编码器说，你在最后一行丢失了一个大括号。

在你的on_btn_click函数中，你的displayDiv是一个数字。您不能像尝试那样使用选择器（它将始终为空）。 $（1）什么都不返回。请改用“#pple”。如果你想将它缓存在变量中，它可能会更好，只需选择一种方法，让你访问id和选择器。

此外，on_btn_click函数中的代码不起作用。不要在每个案例块中使用函数，而是将代码内联。您的代码应如下所示：

 $(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;
    }
}});

jquery自定义选项卡不起作用

3 个答案: