2

我有一个水平滚动网站，当每个部分进入视图时，我无法让导航链接保持活动状态。我的意思是我让它们工作一次，但是当我刷新页面时它们消失了，当你第一次访问该站点时，显示的 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>
4

4 回答 4

0

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

于 2013-06-23T19:15:00.440 回答
0

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

你有2个选择：

从 URL 哈希中获取值并调用trigger

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

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

于 2013-06-23T19:15:48.127 回答
0

你有一个更新类的函数，但是定义一个函数并不能让它运行。它仅在用户单击a.panel元素时运行。

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

于 2013-06-23T19:06:16.430 回答
0

在页面加载时，您需要将链接之一设置为活动

$(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');
    });
});
于 2013-06-23T19:12:04.397 回答