1

我目前正在开发一个网站，在我的 mainContent div 中有 5 个 div。1个div默认可见，其他4个隐藏（注意：默认可见div对应首页内容）。我在 sideMenu 中也有 5 个链接，它们对应于每个隐藏/可见的 div。

我试图实现的目标是使用 Jscript 实现以下目标：

  • 当单击 sideMenu 中的一个链接时，我希望相应的 div 可见（如果隐藏），其余的 div 隐藏。

任何人都可以提供任何指示吗？

尝试插图：

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

默认主页：

链接1 | 链接2 | 链接3

内容分区：

div1 - 可见

div2 - 隐藏

div3 - 隐藏

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

Link2被按下：

链接1 | 链接2 | 链接3

内容分区：

div1 - 隐藏

div2 - 可见

div3 - 隐藏

4

3 回答 3

0

我会使用 jQuery 并做这样的事情

function changePage(page){
    $('#contentDiv').children('div').each(function(){
         if($(this).css('display') != 'none')
         {
              $(this).css('display', 'none'))
         }
});

      switch(page){
         case 1:
             //make home visible
         break;
         case 2:
             //make about visible
         break;
         case 3:
             //make contact visible
         break;

       }
}

这些按钮在侧边栏，点击后进入功能，隐藏当前显示的页面，然后使用开关来决定显示什么新页面

<button onclick="changePage(1)">Home</button>
<button onclick="changePage(2)">About</button>
<button onclick="changePage(3)">Contact</button>

Ps 我还没有真正检查过这段代码，但我想你明白了

于 2012-07-19T16:00:59.060 回答
0

给所有内容 div 一个通用的类名，例如“contentPanel”，每个都有一个唯一的 ID，如#home-panel,等。除了主 div 之外#page1-panel，您应该为所有这些设置样式。display:none像这样设置你的链接：

<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/。

于 2012-07-19T16:02:12.797 回答
0

假设你的 html 是这样的：

<ul>
<li><a  class='link' data-linkno='1' href="#">Link 1</a></li>
<li><a class='link' data-linkno='2' href="#">Link 2</a></li>
<li><a class='link' data-linkno='3' href="#">Link 3</a></li>
</ul>
<div class='content' id='div1">blah</div>
<div class='content' id='div2">blah</div>
<div class='content' id='div3">blah</div>

以下 jQuery 或类似的东西应该可以工作

 $(function() {
       $(".link").live("click", function(e) {
       $(".content").hide();
       $("#div"+$(this).data("linkno")).show();
        })
    })
于 2012-07-19T16:08:00.347 回答