js中设计问题

发布于
2020-03-30

更新于
2020-03-30

新手上路，请多包涵

我使用锚点进行静态的Url传值，用来做导航。

这个是我传值的内容，点击的时候url是改变了。
但是使用location获取href的值的时候确是上一次的url值，而正确的值被存储在下面，需要下一次点击的时候才能拿到。

如图所示；这样导致我得点击两次才能进行获取到正确值，下面是点击两次

这时候的localtion才能拿到正确值，这是什么原因呢？？？？，求大神帮我解决一下，谢谢了
就像这样，我里面有hash值，但是就是提前不到：

这是我提前的代码

html css3 css 前端 javascript

阅读 3.4k

4 个回答

得票最新

不是酸柠檬

8915

发布于
2020-03-30

✓ 已被采纳

监听hashchange就可以了，给你参考代码

<body>
  <a href="#user">user</a>
  <a href="#login">login</a>
</body>
<script>
  //hash改变就会触发
  window.onhashchange = function () {
    var hash = window.location.hash;//获取hash
    hash = hash.substring(1);//去掉前面的#
    console.log('%clog: ' + hash, 'color:#00f;font-siz:16px;line-height:20px;')
  };
</script>

hfhan

29k72241

发布于
2020-03-30

更新于
2020-03-30

onclick的执行顺序优于href顺序，执行完onclick才会执行href跳转。

最直观的体现就是可以在点击事件里取消默认来阻止跳转，你这里的现状也可以说明。

所以解决办法就是监听onhashchange事件，或者在点击事件中延迟输出。

定时器和onhashchange不是什么难的东西，你应该学会查找资料，而不是做伸手党

$('.xxx').on('click', function(event){
    //event.preventDefault()
    console.log(location.hash)
    setTimeout(function(){
        console.log(location.hash)
    })
})

window.onhashchange = function(event) {
    console.log(location.hash);
};