Question

我有一个水平滚动网站，当每个部分进入视图时，我无法让导航链接保持活动状态。我的意思是我让他们工作一次，但当我刷新页面他们消失，当你第一次来到网站时，显示div链接不活跃。我从这个网站尝试了几种方法，但没有运气。求救！

这是不正确的代码（我是jquery / javascript noob）：

$('a.panel').bind('click',function(event){
    $('a.panel').removeClass('active');
    $(this).addClass('active');
});

我的HTML就是这样：

<nav>
    <li><a href="#1" class="panel">home</a></li>
    <li><a href="#2" class="panel">about</a></li>
    <li><a href="#3" class="panel">work</a></li>
</nav>

<div id="content">
    <div id="mask">
        <section id="1">home content</section>
        <section id="2">about content</section>
        <section id="3">work content</section>
    </div>
</div>

Answer 1

您有一个更新类的功能，但定义一个函数不会使它运行。它仅在用户单击a.panel元素时运行。

如果你想在页面加载/刷新上运行，你需要一些方法来找出活动元素是什么。是否认为页面刷新后相同的元素将处于活动状态？如果是这样，也许你可以尝试store.js。可能会有更简单的答案，但我无法想到任何问题。

Answer 2

在页面加载时，您需要设置其中一个链接活动

$(document).ready(function() {
    if (!location.hash) {
        $('a.panel:first').addClass('active');
    } else {
        $('a.panel[href=' + location.hash + ']').addClass('active');
    }

    $('a.panel').bind('click', function(event) {
        $('a.panel').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 3

嗯...你也可以使用jQuery.waypoints： http://imakewebthings.com/jquery-waypoints/#get-started

Answer 4

刷新后，您将丢失由Javascript修改的HTML状态。

你有两个选择：

从网址哈希获取价值并致电trigger

var hash = window.location.hash;
$('nav').eq(hash-1).trigger('click');

或者将数据存储在缓存或网络存储中......

无法分页为滚动网站工作

4 个答案: