顯示/隱藏具有單獨鏈接的相同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();
    });
});