javascript - 如何使用 jQuery 显示/隐藏 DIV

Question

我想创建一个函数来显示和隐藏 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最终隐藏了midRight中的每个div，而在JSFiddle, the click event doesn't seem to be handled at all上.

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

Answer 1

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

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