前端 - 如何控制Javascript( jquery)的触发时间?

Question

我的页面上有一列button按钮, 点击其中的一个后, 浏览器跳到新页面, 然后会给这个被点击的button添加active属性.并且其他的button去掉active属性.

我的做法是:

 $("#my_button a").click(function(e){
        $('a.active').removeClass('active');   // 去掉active属性 
        $(e.target).addClass('active');        // 被点击的button添加active属性
  });

问题来了, 上面的删除和添加样式都成功了, 但是由于点击后页面跳转了, 不知道为什么, 所有的样式都恢复默认了(即没点击之前)..

是因为页面跳转的原因吗, 如果是, 那么能够在页面跳转后再执行JS吗?

或者, 是我的做法有问题?

谢谢.

Answer 1

其实你只要按照后端语言的想法给传参就好了...

var Buttons = document.querySelectorAll('#my_button a'),
    ActiveButton = location.hash.substr(2) || '';

if(ActiveButton) {Buttons[ActiveButton].classList.additem('active')}

for(var i=0, l=Buttons.length; i<l; i++) {
    (function(number) {
        Buttons[number].onclick = function(e) {
            e.preventDefault();
            location.href = this.href+'#!'+number
        }
    })(i);
}

Answer 2

通过锚点，来传递某些参数是一个可行的做法。

<a href='/new.html#btn1' target="_blank">btn1</a>

//new.html
$(function(){
    //去掉所有actibe
    $('.J-all-btn').removeClass('active')
    //给当前btn加上active
    $('#'+location.hash.substring(1)).addClass('active')
})

Answer 3

页面刷新了，肯定是没有的。比如说分页切换页面，如果使用ajax请求数据，页面不会刷新，改变的样式肯定是还在的。如果你要刷新页面，又还想要样式能够保持，可以按照如下思路做。

1. 在页面初始化函数中添加对按钮部分样式的设置

2. 到底如何确认应该哪一个按钮有焦点样式？你可以设置一个参数绑定到跳转链接中，比如www.xx.com?index=1,这里的index=1就是指定按钮组的序列

3. 初始化时写一个函数从链接地址从把index的值获取出来，如果没有则默认index=0

4. 在离开页面是将index=n传递到下一个页面