0

我正在制作一个使用 div/slides 来保存内容的网站。它们位于具有溢出：隐藏的容器内。导航栏使用 document.getElementById('box').style.left='0px' 更改 div 位置以将所需的 div 显示在视图中。左侧的 CSS 属性更改为“onclick”以将目标 div 带入视图并将其他 div 推出容器查看区域。过渡动画由 CSS 处理。

这是小提琴示例的链接。http://jsfiddle.net/HyHmF/1/。HTML代码如下，

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px';
                                   document.getElementById('box2').style.left='200px';
                                   document.getElementById('box3').style.left='400px';">Box 1</a>

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px';
                      document.getElementById('box2').style.left='0px';
                      document.getElementById('box3').style.left='200px'";>Box 2</a>

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px';
                      document.getElementById('box2').style.left='-200px';
                      document.getElementById('box3').style.left='0px'">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>

我的问题是这个。如何使浏览器后退按钮更改 CSS 以将先前显示的 div 带入视图。也就是说，无需恢复到“home”div。

我相当熟悉javascript和jquery。我知道答案在于 JQuery BBQ 推送状态和主题标签。不幸的是，我无法在我的网站@http ://www.sumoto.com.au中实现这些。小提琴基本上是这个网站，按比例缩小，以便于解释我的困境。

本质上，如何将当前 css 视图的“快照”保存到主题标签 url，并通过浏览器后退/前进导航调用此“保存”？

4

1 回答 1

0

我解决了我的问题！

我从 a 元素中删除了所有杂乱的 onclick 行。并为每个添加了 id。实际的标签/浏览器后退按钮功能hashchange由 Ben Alman 提供，当然还有 JQuery。

修改后的 HTML 是：

<a class="boxes" id="link1" href="#box_1">Box 1</a>
<a class="boxes" href="#box_2">Box 2</a>
<a class="boxes" href="#box_3">Box 3</a>                     
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>

Javascript

$(document).ready(function() {
    $(window).hashchange( function(){
    var hash = location.hash;
    var lc1 = $("#link1")
    if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';}
    if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';}
    });
    $(window).hashchange();
});

a 链接是脚本的目标并分配了一个 var；“lc1”。if 语句检查 lc1（链接）的哈希值是否等于浏览器 url。如果是，则执行 css 操作并发生滑动。如果不是（例如当用户单击返回时），这些框将返回到其原始（或以前）构造。

于 2013-07-21T10:58:28.717 回答