Jscript -与隐藏/显示div卡在一起

Question

我目前正在一个网站工作，在我的mainContent div中，我有5个div。默认情况下，1 div是可见的，而其他4则是隐藏的(注意:默认可见div对应于主页内容)。我还在一个sideMenu中有5个链接，它们对应于每个隐藏/可见的div。

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

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

有谁能帮上忙吗？

试图举例说明：

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

默认主页：

link1 _ link2 _ link3

contentDiv：

div1 -可见

div2 -隐藏

div3 -隐藏

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

Link2被按下：

link1 _ LINK2 _ link3

contentDiv：

div1 -隐藏

div2 -可见

div3 -隐藏

Answer 1

给所有的内容div一个共同的类名，例如'contentPanel‘和每个内容div的唯一ID，比如#home-panel，#page1-panel等等。除了home div之外，您应该使用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的jQuery哈希更改插件：http://benalman.com/projects/jquery-hashchange-plugin/。我在我以前的网站上使用了这个：http://paislee.net/。

Answer 2

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

附注：我还没有检查过这段代码，但我想你知道了

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