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

我遇到了一个问题，试图让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>

您想要实现的一个基本示例：

JS:

---

在单击锚定时放置事件，然后检查单击锚定的值。

假设第一个链接切换第一个div的可见性，第二个链接切换第二个div

$('a').click(function() {
  var index = $(this).closest('li').index();
  $('#pieces div').eq(index).toggle();
}

---

并在第二个div上设置

display:none

为

#sideNav

容器中的每个锚设置单击功能，阻止默认锚标记功能（

preventDefault（）

，如果提供了

href

属性），然后执行您想要执行的操作

$('a').click(function() {
  var index = $(this).closest('li').index();
  $('#pieces div').eq(index).toggle();
}

$('#sideNav a').click(function(e){

  // prevent default link event
  e.preventDefault();

  // use show()/hide() or toggle()
}); 

---

诀窍是使标记结构更有意义，使CSS样式更通用。这允许您利用链接和下面选项卡之间的公共索引，以及使用单个CSS类定义样式。然后，您可以轻松地为任意数量的链接和面板缩放解决方案：

HTML

JS

---

你的元素是动态的吗？还是只是静止？只是静止。div#1和#2中只包含静态文本和图像。是否可以将其更改为用于2个以上的链接/div？是的。但是你需要像Stephen的回答那样使用更复杂的代码。只有稍微复杂一些的jQuery/CSS选择器，甚至不需要严格定义那些编号的ID或

面板

类；你可以得到这些信息。从标记结构来看，如果您对这种变化有顾虑的话。您好，这很可能解决问题。。。但是，如果你能提供一些关于它如何工作以及为什么工作的解释，那就太好了：）别忘了——堆栈溢出上有很多新手，他们可以从你的专业知识中学到一两件事——对你来说显而易见的事对他们来说可能不是这样。

$('#sideNav a').click(function(e){

  // prevent default link event
  e.preventDefault();

  // use show()/hide() or toggle()
}); 

<div id="content">
    <div id="SideNav">
        <ul>
            <li> <a href="#" id="link1">Print 1</a>

            </li>
            <li> <a href="#" id="link2">Print 2</a>

            </li>
        </ul>
    </div>
    <div id="pieces">
        <div id="panel1" class="panel">First Div</div>
        <div id="panel2" class="panel">Second Div</div>
    </div>
</div>

/* 
  #content, #SideNav, #pieces
  Same As Before
*/

.panel {
    display: none;
    position:absolute;
    top: 0px;
    right: 0px;
}

$(function () {
    $("a[id^='link']").click(function (e) {
        e.preventDefault();
        var index = this.id.replace("link", "");
        $(".panel").hide();
        $("#panel" + index).show();
    });
});