Question

我正在网站上工作，在我的mainContent div中我有5个div。默认情况下，1 div是可见的，其他4个是隐藏的（注意：默认的可见div对应于主页内容）。我在sideMenu中也有5个链接，对应于每个隐藏/可见div。

我想要实现的目标是使用Jscript：

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

有人可以帮忙解决任何问题吗？

尝试举例说明：

- ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT; ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;

默认主页：

link1 | link2 | LINK3

contentDiv：

div1 - 可见

div2 - 隐藏

div3 - 隐藏

- ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT; ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;

按下Link2：

link1 | LINK2 | LINK3

contentDiv：

div1 - 隐藏

div2 - 可见

div3 - 隐藏

Answer 1

我会使用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>

P.S。我实际上没有检查过这段代码，但我认为你明白了这个想法

Answer 2

为所有内容div提供一个公共类名，例如'contentPanel'和每个ID都是唯一的ID，例如#home-panel，#page1-panel等。除了主div之外，您应该使用display:none设置所有这些ID。像这样设置你的链接：

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

Answer 3

说你的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();
        })
    })

Jscript - 卡住了hide /揭示div

3 个答案: