Question

我想创建简单的侧边栏。我有2个链接，点击它们展开侧边栏与不同的div＆gt;。再次单击将其折叠。
如何点击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

您尝试做什么称为标签内容。在您的特定实例中，演示文稿略有不同，但实现方式相同/类似。

您要做的是将相同的点击处理程序绑定到将显示其自己的内容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()。

jquery在侧边栏之间切换

1 个答案:

HTML

CSS

JS