javascript - 使用单独的链接显示/隐藏占据相同空间的 div

Question

我在尝试让 div 占据相同空间时遇到问题，并在单击它们各自的链接时也对它们具有显示/隐藏功能。

任何人都可以让我知道正确的 jQuery 来实现这一点吗？下面是没有使用 jQuery 的代码。

我的想法是，当我点击 Print 1 时，#1 会出现，当我点击 Print 2 时，#1 会消失，#2 会取而代之。

当前的 HTML 看起来有点像这样:

<div id="content">

    <div id="SideNav">                  
       <ul>
          <li>
            <a>Print 1</a>
          </li>
          <li>
            <a>Print 2</a>
          </li>             
       </ul>
    </div>

    <div id="pieces">
       <div id="1">
       </div>
       <div id="2">
       </div>
    </div>

 </div>

CSS 基本上是这样的:

#content {
    width:848px;
    position:relative;
}

#SideNav {
    width:169px;
    float:left;
}

#pieces  {
    width:678px;
    top:0px;
    float:right;
    position:relative;
}

#1 {
    position:absolute;
    top: 0px;
    right: 0px;
    z-index:1;
}

#2 {
    position:absolute;
    top: 0px;
    right: 0px;
    z-index:2;
}

Answer 1

JSFIDDLE

您想实现的目标的基本示例:

JS:

$('a').on("click",function(){
   alert($(this).text());
    if($(this).text() == "Print 1"){
        $('#1').show();
        $('#2').hide();
    }else{
        $('#2').show();
        $('#1').hide();
    }
});    

在单击您的 anchor 时放置一个事件，然后检查单击的 anchor 的值。