Question

我以此代码为例：

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

});

然而，在尝试将我的代码添加到我自己的代码之后，我无法使其工作。这是如何工作的？

任何帮助都很感激，我的编码知识非常有限，所以如果您选择帮助，请详细说明。

Answer 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>

Answer 2

这实际上非常简单。 URL中的“哈希”是#foo位; window.location.hash仅从URL返回此位。你收到的代码有点荒谬。哈希的默认功能是使浏览器跳转到页面中的特定id。如果禁用javascript，您仍然希望它跳转，因此您不应在URL中使用#showcontainer1之类的任意哈希值，而应使用实际ID本身#container1。然后，您不需要switch语句，只需直接显示此div。

if (window.location.hash) {
    $(window.location.hash).show();
}

将代码添加到将通过jQuery调整DIV的URL

2 个答案: