jq实现导航栏效果，即选中的文字改变颜色

Question

当我这样写的时候，是能够实现导航栏选择效果的

<style>
    .active {
        color: wheat;
    }

    .none {
        color: blue;
    }
</style>
<div class="menu">
    <nav class="nav">
        <div class="wrap">
            <ul>
                <li><a href="#"><span>最新</span></a></li>
                <li><a href="#"><span>数码</span></a></li>
            </ul>
        </div>
    </nav>
</div>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $('span').click(function() {
        var f = this;
        $('span').each(function() {
            this.className = this == f ? 'active' : 'none'
        });
    });
</script>

但是当我给超链接加target的时候，原本实现的导航栏选中效果就会消失如下

<style>
    .active {
        color: wheat;
    }

    .none {
        color: blue;
    }
</style>
<div class="menu">
    <nav class="nav">
        <div class="wrap">
            <ul>
                <li><a href="#" target="123"><span>最新</span></a></li>
                <li><a href="#" target="123"><span>数码</span></a></li>
            </ul>
        </div>
    </nav>
</div>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $('span').click(function() {
        var f = this;
        $('span').each(function() {
            this.className = this == f ? 'active' : 'none'
        });
    });
</script>

请教一下各位，如何在使用target的情况下保证导航栏选择效果的实现！

Answer 1

你为什么要加target="123"啊?
你加target="123"点击之后是打开了一个新的标签页面了啊.
新的标签页面加载了与之前相同的页面.
文字改变颜色的是原来的标签页面,新打开的标签页面中你没有点击自然不会改变颜色
你切换回原来的标签页面看看

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!