1

我以这段代码为例:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

在另一个页面上,我希望有一个链接,当用户通过单击该外部链接加载页面时,该链接将显示Div #2 。我希望通过向 URL 添加一个哈希变量来实现这一点,例如:domain.com/page.html#newboxes2

有人告诉我,这样的功能可以通过玩这个来实现:

$(function(){

  switch( window.location.hash ){
    case '#showcontainer1':
      $('#container1').fadeIn();
      break;
    default:
      $('#container2').fadeIn()
      break;
  }

});

但是,在尝试围绕如何将该代码添加到我自己的代码中之后,我无法使其工作。这是如何运作的?

感谢您提供任何帮助,我的编码知识非常有限,因此如果您选择提供帮助,请详细说明。

4

2 回答 2

1

使用您当前的 html 结构,您需要做的就是这个。导航到domain.com/page.html#newboxes2将导致<div>带有 id 的结果,#newboxes2如下所示。和以前一样,将它们全部设置为display:none;默认值。您应该考虑将样式从 html 中提取出来,而是将它们全部放在<style>页面顶部的标签之间。您可以使用类选择器(例如.newboxes)将相同的样式应用于特定类的所有元素。

演示:http: //jsfiddle.net/eqPGW/4/

Javascript:

$(function() {
    var showBox = window.location.hash.indexOf('#newboxes') != -1;
    if(showBox) {
        $(window.location.hash).prev('.cover').hide();
        $(window.location.hash).show();
    }
    else {
        $('.cover').first().hide();
        $('.newboxes').first().show();   
    }

    $('.cover a').click(function(e) {
        e.preventDefault();
        var $cover = $(this).closest('.cover');
        $cover.hide();
        $('.cover').not($cover).show();
        $('.newboxes').hide();
        $cover.next('.newboxes').show();            
    });
});

HTML/CSS:

<html>
<head>
    <script type="text/javascript">
        // PUT SCRIPT HERE
    </script>
    <style>
        .newboxes {
            border: 1px solid black;
            background-color: #CCCCCC;
            display: none;
            padding: 5px;
            width: 150px;
        }
        .cover {
        border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;
        }
    </style>
</head>

<body>
     <div class="cover">
        <a id="myHeader1" href="#" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes1">Div #1</div>

     <div class="cover" >
        <a id="myHeader2" href="#" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes2">Div #2</div>

     <div class='cover' >
        <a id="myHeader3" href="#" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes2">Div #3</div>        

</body>
</html>
于 2012-08-03T21:22:45.547 回答
0

这实际上非常简单。URL 中的“哈希”是#foo位;window.location.hash仅从 URL 返回此位。不过,您收到的代码有点荒谬。哈希的默认功能是让浏览器跳转到页面中的特定 id。如果 javascript 被禁用,你仍然希望它跳转,所以你不应该像#showcontainer1在 URL 中那样使用任意散列,而是使用实际的 id 本身,#container1. 那么,就不需要switch语句了,直接显示这个div就好了。

if (window.location.hash) {
    $(window.location.hash).show();
}
于 2012-08-03T21:23:17.070 回答