Question

我正在制作一个使用div / slide来保存内容的网站。它们位于容器内，溢出：隐藏。导航栏使用document.getElementById（'box'）。style.left ='0px'来改变div位置以将所需的div带入视图。左侧CSS属性被更改为“onclick”以将目标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带入视图。也就是说，没有回到'家'div。

我对javascript和jquery相当熟悉。我知道答案在于JQuery BBQ pushstates和hashtags。很遗憾，我无法将这些内容实施到我的网站@ http://www.sumoto.com.au中。这个小提琴基本上是这个网站，按比例缩小，以便于解释我的困境。

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

Answer 1

我解决了我的问题！

我从a元素中删除了所有杂乱的onclick行。并为每个人添加了id。实际的主题标签/浏览器后退按钮功能由Ben Alman的hashchange提供，当然还有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();
});

脚本定位了一个链接，并分配了一个var; “LC1”。 if语句检查lc1（链接）的哈希值是否等于浏览器URL。如果是，则执行css操作并发生滑动。如果不是（例如当用户点击回来时）框返回其原始（或先前）构象。

单页，旋转木马风格，幻灯片网站：导航到上一张幻灯片，在浏览器后退按钮上，没有默认为主页幻灯片？

1 个答案: