页面内的JQUERY div，带有URL？

Question

我有一个有点复杂的问题。对我来说很复杂。首先，我想说我在论坛中阅读了几乎所有关于此的内容，我在这里和网络上尝试了一些喜欢的代码，但没有适合我的情况。所以： 我有一个基于单页（index.php）的网站。其中的所有内容都是通过 jquery 的显示/隐藏 div 调用的。在我制作了这个网站的第一页之后（我真正的意思是“在我完成第一个 div 并在页面上显示内容之后”），我开始制作第二个。问题来了。当我在第二个 div 中进行一些更改并刷新站点时，浏览器会返回带有我的第一个（已完成的）div 的视图。因为我告诉他，这是默认打开的 div。 现在我想让每个单独的 div 都有自己的 URL（例如：http://mysite/#divone、http://mysite/#divtwo 等）在浏览器的地址栏中可见，这样我就可以共享链接，并将确切的内容等。我读到了 jquery 历史插件和其他类似的解决方案（widows.location、书签插件等），但似乎没有什么对我有用......

这是我的 index.php 文件中的代码，它调用了 div：

    <!-- START MENU -->
<ul class="lavaLampWithImage" id="lava">

 <li class="current"><a href="#about-us" onclick="togLayer('home');">About Us</a></li>

 <li><a href="#web-design" onclick="togLayer('web');">Web Design</a></li>

 <li><a href="#graphic-design" onclick="togLayer('graphic');">Graphic Design</a></li>

 <li><a href="#gallery" onclick="togLayer('gallery');">Gallery</a></li>
</ul>
<!-- END MENU -->

如您所见，它使用 onclick 函数调用 div ID，这是问题之一。 第二个是我用来以漂亮的方式可视化链接的另一个脚本（Lava Lamp fo Jquery）包含用于更改单击链接的类（“当前”）的函数。我在网上找到的大多数解决方案都包含自己的功能，而且事情会变得一团糟。

这是包含其他 php 页面内容的 div 之一：

    <!-- START HOME PAGE -->
  <div id="home">
   <?php include("includes/home.php"); ?>
  </div>
<!-- END HOME PAGE -->

这是我用来在点击时调用 div 的脚本：

        /*
    Global "swap" holder
    Use value, null, if no layer initially visible
    */
    var currLayerId = "home";

    function togLayer(id)
    {
    if(currLayerId) setDisplay(currLayerId, "none");
    if(id)setDisplay(id, "block");
    currLayerId = id;
    }

function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}

如果您对此提供任何帮助或建议，我将不胜感激。 我希望我的解释是可以理解和正确的

编辑：这是我正在谈论的网站：http://spoonk.eu 它仍然没有英文版本。但我想你会明白我在说什么。

Answer 1

根据我在第一个答案中列出的两个帖子，我编译了以下解决方案（在 FF 和 IE7 中测试）。

HTML：

<a href="#div1" onclick="showDiv('#div1');">Div1</a>&nbsp;
<a href="#div2" onclick="showDiv('#div2');">Div2</a>&nbsp;
<a href="#div3" onclick="showDiv('#div3');">Div3</a>&nbsp;
<br /><br />
<div id="div1" class="allDivs"><h1>Div 1 Content</h1></div>
<div id="div2" class="allDivs"><h1>Div 2 Content</h1></div>
<div id="div3" class="allDivs"><h1>Div 3 Content</h1></div>

Javascript：

$(document).ready(function() {
    var anchor = '#div1';

    if (location.hash != '')
        anchor = location.hash;

    showDiv(anchor);
});

function showDiv(divID) {
    $('.allDivs').hide();
    $(divID).show();
}

Answer 2

看看this 的帖子，或this jQuery 插件。

Answer 3

听起来您正在尝试做的是在用户刷新页面时让页面加载先前选择的 div。这是你需要做的。对于每个链接/锚标记 (<a>)，确保其 href 属性设置为 "#the_name_of_the_panel。在每个链接的点击事件中，我猜您已经想好在事件结束时执行return false; 以防止页面随机滚动到其他位置 - 但如果您还没有这样做，请确保你也这样做。

当用户刷新页面时，这段代码应该处理获取适当的 div：

$(document).ready(function() {
    theLoc = location.href;
    hash = theLoc.split("#");
    if( hash.length > 1 ) {
        hash = hash[1]; // this gets the part after the #
    } else {
        /* this is necessary because the user might not be
           refreshing, they might be making a first visit to the page */
        hash = 'name of default div';
    }

    // your code to switch to the appropriate div goes here
});

这应该可以解决问题。 ;)