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 回答