关于锚点跳转

Question

点击导航栏li后，如何监听浏览器url变化

onclick触发window.location.href只能获取点击前的url。

因为点击导航并不会刷新页面，而我想获取点击后的锚点触发选项卡改变。

<ul>
    <li><a href="intro.html#a">简介1</a></li>
    <li><a href="intro.html#b">简介2</a></li>
    <li><a href="intro.html#c">简介3</a></li>
    <li><a href="intro.html#d">简介4</a></li>
    <li><a href="intro.html#e">简介5</a></li>
    <li><a href="intro.html#f">简介6</a></li>
    <li><a href="intro.html#g">简介7</a></li>
</ul>

Answer 1

https://mp.weixin.qq.com/s?__...

早之前整理的一个 CSS 实现的方式。

Answer 2

.active{background-color:red};

$(document).on('click','a',function(){
    $(this).addClass('active').siblings().removeClass('active');
    
})

Answer 3

可以监听hashchange事件

Answer 4

何必绕弯子监听url，直接监听a标签的点击事件，再获取a标签的href属性就知道点击的哪一个了。

Answer 5

# 后面是 hash window.location.hash 可以自己看下整个 location 方法

Answer 6

锚点跳转

使用锚点跳转，hash值会变化，可以通过监听hashchange事件来获知。

window.addEventListener('hashchange', function() {
    console.log('hashchange');
});

但是无法获取目标节点，因为这个事件是window的。
这种方式虽然不会刷新整个页面，但是依旧会生成历史记录，运行history.length就可以看出结果。

阻止默认行为

如果一定要将选项卡的标识信息，写在href属性上的话，可以通过阻止a标签的默认行为，交给javascript来处理后续的行为。
html部分

<ul>
    <li>
        <a href="#item1">简介1</a>
    </li>
    <li>
        <a href="#item2">简介2</a>
    </li>
    <li>
        <a href="#item3">简介3</a>
    </li>
</ul>

javascript部分

var list = document.getElementById('list');
list.addEventListener('click', function(event){
    var target = event.target;
    console.log(target)
    if(target.tagName === 'A') {
        event.preventDefault();
        event.stopPropagation();
        // 这里不要用target.href，不然你会获取完整的路径信息；
        var href = target.getAttribute('href');
        //TODO 切换选项卡
    }
});