如何使用 jQuery 显示/隐藏 DIV答案

【问题标题】：How to show/hide DIVs with jQuery如何使用 jQuery 显示/隐藏 DIV
【发布时间】：2013-07-01 17:25:24
【问题描述】：

我想做一个函数来显示和隐藏一个 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>

DIVs 在页面上：

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

函数showPage 最终隐藏了midRight 中的每个div，而JSFiddle, the click event doesn't seem to be handled at all 上。

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

【问题讨论】：

为什么要将showdiv 附加到两个空字符串？只是好奇...
function showPage(){$('#midRight div').toggle(); } 不够吗？
@Crush - 我改回来了；只是看看它是否有帮助，但显然没有任何区别！ j08691 仅当有两个列表项且没有更多时...
Here's a version without the old-fashioned "onfoo" event handler attributes.
同样将<li> 元素包装在<a> 标签中并不是真正有效的HTML。

标签： javascript jquery html show-hide

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

因为目标上有明确的“.show()”，所以从“.hide()”中排除它真的没有意义。
@Pointy 我猜这取决于选择附加元素（并排除它）是否比应用样式隐藏它更有效。

【解决方案3】：

DEMO

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

或者，不使用 ID：

DEMO

$('ul a').click(function() {
    var index = $(this).index();
    $('#midRight > div').hide().eq(index).show();
});

【讨论】：

【解决方案4】：

小提琴不起作用，因为它找不到函数，它找不到函数，因为您在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();
    });
});

【讨论】：