如何使用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最终隐藏了每个div midRight,而在JSFiddle上,click事件似乎根本没有被处理.

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

Answer 1

您可以编写选择器来隐藏所有子div midRight,然后使用传递的ID显示div.无需转换为String,因为这是您传递的内容:

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