javascript - 一次只显示一个隐藏多个 Div - Jquery

Question

我正在制作一个小应用程序，有一个侧边栏菜单和一个标题菜单，我基本上希望两个菜单中的所有元素都在一个“页面”/窗口上显示/隐藏内容。因此，当单击一个按钮时，它会显示相应的 Div 并隐藏所有其他 Div，等等。

<a id="linktodiv1">Show Window 1, hide other windows</a>
<a id="linktodiv2">Show Window 2, hide other windows</a>
<a id="linktodiv3">Show Window 3, hide other windows</a>
<div id="linktodiv4">Show Window 4, hide other windows</div>

<div id="window1">content</div>
<div id="window2">content</div>
<div id="window3">content</div>
<div id="window4">content</div>

知道使用 Jquery 编写代码的最佳/最简洁的方法是什么吗？非常感谢您的帮助。

Answer 1

可以使用索引，假设它们在页面中都保持 1:1 的顺序

var $links = $('[id^=linktodiv]'),// cache elements to variables
    $content = $('[id^=window]');

$links.click(function(){
    // hide all content, show matching index content window
    $content.hide().eq( $links.index(this) ).show();        
});

给每个公共(public)组件一个公共(public)类会很有帮助

DEMO