javascript - Jscript - 陷入隐藏/显示 div 的困境

Question

我目前正在开发一个网站，在我的 mainContent div 中我有 5 个 div。默认1个div可见，其他4个隐藏(注:默认可见div对应首页内容)。我在 sideMenu 中还有 5 个链接，对应于每个隐藏/可见的 div。

我试图使用 Jscript 实现以下目标:

• 当点击侧边菜单中的某个链接时，我希望相应的 div 可见(如果隐藏)，而其余的 div 则隐藏。

有人可以帮忙指点一下吗？

尝试举例说明:

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

默认主页:

链接1 |链接2 |链接3

内容Div:

div1 - 可见

div2 - 隐藏

div3 - 隐藏

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Link2 已按下:

链接1 |链接2 |链接3

内容Div:

div1 - 隐藏

div2 - 可见

div3 - 隐藏

Answer 1

给所有内容 div 一个通用的类名，例如'contentPanel' 并且每个都有一个唯一的 ID，例如 #home-panel、#page1-panel 等。您应该使用 display:none< 来设置所有这些样式 除了 home div。像这样设置您的链接:

<a href="#home-panel" class="panel-link">Home</a>
<a href="#page1-panel" class="panel-link>Page1</a>
<!-- etc.. -->

对于脚本，一个建议是使用 jQuery 。它可能看起来像

$(".panel-link").click(function() {
    var target = $(this).attr("href");
    $(".contentPanel").hide();
    $(target).show();
});

如果您希望脚本与浏览器历史记录更改同时正确运行，请查看 Ben Alman 的 jQuery 哈希更改插件:http://benalman.com/projects/jquery-hashchange-plugin/ 。我在我的旧网站上使用了这个:http://paislee.net/ .