javascript - jquery 在侧边栏之间切换

Question

我想创建简单的侧边栏。我有 2 个链接，单击它们会展开具有不同 div> 的侧边栏。再次点击折叠它。
我怎样才能使单击 link2 并从 link1 扩展侧边栏，只会更改 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

您尝试执行的操作称为选项卡式内容。在您的特定实例中，演示文稿略有不同，但实现相同/相似。

您要做的是将同一个点击处理程序绑定(bind)到所有将显示其内容 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()了解更多详情。