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();
    }
});

点击你的锚点然后检查点击锚点的值。

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();
    });
});

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

4 个答案: