jquery在侧边栏之间切换

Question

我想创建简单的侧边栏。我有2个链接，点击它们展开侧栏与不同的div>。再次单击可将其折叠。

我怎样才能在link1展开的侧边栏上点击link2，只改变div而不折叠侧边栏呢？类似于http://www.w3schools.com/中的面板(单击教程/参考/示例)

#wrapper { padding-left: 0; }
#wrapper.toggled { padding-left: 220px; }
#wrapper-link1 { display:none; }

$('[data-toggle="link1"]').click(function () {
    $('#wrapper').toggleClass('toggled');
    $('#wrapper-link2').hide();
    $('#wrapper-link1').show();
});

Answer 1

你想要做的就是所谓的选项卡式内容。在您的特定实例中，表示稍有不同，但实现是相同/相似的。

您要做的是将相同的click处理程序绑定到将显示其自己的内容DIV的所有链接。然后，此处理程序将隐藏当前显示的DIV，并显示选定的内容DIV。

HTML

<ul class="sidebar-toggler">
  <li><a href="#" data-target="a">Link A</a></li>
  <li><a href="#" data-target="b">Link B</a></li>
</ul>

<aside class="sidebar-content">
  <div data-content="a">
    Content for <strong>Link A</strong>.
  </div>
  <div data-content="b">
    Content for <strong>Link B</strong>.
  </div>
</aside>

CSS

.sidebar-content [data-content] {
  display: none;
}

JS

var $sidebar_content = $( '.sidebar-content' );

$( '.sidebar-toggler' ).on( 'click', '[data-target]', function ( e ) {

    var target = $( this ).data( 'target' );

    $sidebar_content.find( '[data-content]' ).hide();
    $sidebar_content.find( '[data-content="' + target + '"]' ).show();

} );

演示JSFiddle。

通常，当您想隐藏这些选项卡式内容区域中的一个时，最简单的做法是隐藏所有内容区域，而不是搜索哪个区域是打开的，然后将其关闭。

$sidebar_content.find( '[data-content]' ).hide();

然后打开选定的内容DIV。您可以使用几种不同的方法来完成此操作，但我喜欢使用data-属性。data-target指向具有相同值的data-content (可以是任何值)。

var target = $( this ).data( 'target' );
$sidebar_content.find( '[data-content="' + target + '"]' ).show();

注意:当使用jQuery和data对象时，jQuery将解析任何data-属性并将它们的值存储在其中。这就是data( 'target' )的由来。有关更多详细信息，请参阅jQuery.data()。