2

我正在尝试编写一个干净的脚本来添加和删除基于 url 的类，因为我正在使用某种形式的 jquery 滑块插件。

所以我有 5 个跨度，第一个 1 在页面加载时有活动类

<span class="one active"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>

当我单击下一个按钮时，jquery 插件会在 url 的末尾附加一个“#/1”，并且对于每张幻灯片，数字都会增加一个，所以这是我迄今为止为每张幻灯片所做的：

$(function(){

$('#continue').click(function(){
  var location = window.location.href;

    if (location.indexOf('#/1') > -1 ) {
      $('.one').removeClass('active');
      $('.two').addClass('active');
    }

    if (location.indexOf('#/2') > -1 ) {
      $('.two').removeClass('active');
      $('.three').addClass('active');
    }
  }); 
});

所以我面临的问题是：

  1. 这仅适用于下一个按钮的单击功能，如果用户单击上一个按钮，则活动类也需要更改为适当的数字，但我可能需要一种方法来准确检查他们单击上一个按钮的步骤from 并且需要将该代码复制 5 次，因为有 5 个步骤。

  2. 如果用户刷新页面 span .one 将再次处于活动状态，并且用户所在的步骤将显示在页面上（刷新时不会返回到第一步）

有什么建议么？

谢谢。

4

1 回答 1

1 
jQuery(window).hashchange( function(){
    jQuery(location.hash).click();
});

jQuery(window).load( function(){
    jQuery(location.hash).click();
});

这两个功能将解决您的问题

于 2012-12-03T14:38:49.893 回答