显示/隐藏具有单独链接的相同div的div

Question

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

谁能让我知道适当的jQuery来实现这一目标？ 下面是没有jQuery的代码。

这个想法是，当我单击“打印1”时，将显示＃1件，而当我单击“打印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();
    }
});    

在锚点的点击上放一个事件，然后检查所点击的锚点的值。

Answer 2

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

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

并在第二个div上设置display:none

Answer 3

您为#sideNav容器中的每个锚设置了click函数，阻止默认的锚标记功能（ preventDefault() ，如果提供了href属性，则执行该操作）。

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

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

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

Answer 4

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

jsFiddle

的HTML

<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>

的CSS

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

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

JS

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