0

我想创建一个函数来显示和隐藏 div 标签并隐藏所有其他标签：

function showPage(showdiv){
    $('#midRight').not(showdiv).hide(); 
    $(showdiv).show();  
}

链接调用函数：

<ul>
  <a style="cursor:pointer;" onclick="showPage('#home_page1')">
    <li>Show Page 1</li>
  </a>
  <a style="cursor:pointer;" onclick="showPage('#home_page2')">
    <li>Show Page 2</li>
  </a>
</ul>

DIV页面上的：

<div id="midRight">
    <div id="home_page1">Content 1</div>
    <div id="home_page2" style="display:none;">Content 2</div>
</div>

该函数showPage最终将每个 div 隐藏在其中midRight，而在JSFiddle 上，似乎根本没有处理 click 事件。

使用 jQuery 显示/隐藏 DIV 的正确方法是什么？

4

4 回答 4

6

您可以编写选择器来隐藏所有子 div midRight，然后显示具有传递 ID 的 div。无需转换为字符串，因为这是您传递的内容：

function showPage(showdiv){
    $('#midRight > div').hide()  
    $(showdiv).show();    
}
于 2013-07-01T17:28:44.580 回答
3

修复了一些语法错误。正如评论所说，您在变量中附加了一个空字符串，只需使用该变量即可。此外，您需要告诉选择器选择目标容器的子项：

function showPage(showdiv){
    $('#midRight').children().not(showdiv).hide();  
    $(showdiv).show();  
}

演示：http: //jsfiddle.net/ACGMj/1/

于 2013-07-01T17:28:53.063 回答
1

演示

function showPage(showdiv){
    $(showdiv).show().siblings().hide();
}

或者，不使用 ID：

演示

$('ul a').click(function() {
    var index = $(this).index();
    $('#midRight > div').hide().eq(index).show();
});
于 2013-07-01T17:30:36.023 回答
1

小提琴不起作用，因为它找不到函数，它找不到函数，因为您指定了要在onLoad. 要修复它，在 jsFiddle 的左上角，将下拉菜单设置onLoad为No wrap - in <body>.

这是一个不使用内联事件的工作版本：

http://jsfiddle.net/gRDdC/

<ul>
 <li>
  <a style="cursor:pointer;" class="nav-link" href="#home_page1">Show Page 1</a>
 </li>
 <li>
  <a style="cursor:pointer;" class="nav-link" href="#home_page2">Show Page 2</a>
 </li>
</ul>

<div id="midRight">
    <div id="home_page1">Content 1</div>
    <div id="home_page2" style="display:none;">Content 2</div>
</div>


$(document).ready(function() {
    $('.nav-link').click(function(e) {
        e.preventDefault();
        $('#midRight > div').hide();
        $($(this).attr('href')).show();
    });
});
于 2013-07-01T17:32:11.990 回答