首页 > 如何控制Javascript( jquery)的触发时间?

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

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

我的做法是:

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

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

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

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

谢谢.


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

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);
}

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

<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')
})

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

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

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

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

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

【热门文章】
【热门文章】