怎样实现顶部导航栏高亮显示（class添加样式失败）

打算在顶部导航栏高亮显示所点击内容，点击后，高亮内容保留，不消失，但用了js想在class添加样式current,但失败了。

比如：点击“首页”，在样式 <li class="topnav_item">添加成 <li class="topnav_item current">；

点击“文萃”，首页的样式current去掉，“文萃”的样式加current，即<li class="top_7 topnav_item current">

代码如下：

请教怎么修改？谢谢！

<style  type="text/css">
.topnav_list{position:relative;margin-right:.5rem;padding-right:.16rem;overflow-x:scroll;overflow-y:hidden;color:#fff;font-size:0;line-height:.8rem;white-space:nowrap;-webkit-overflow-scrolling:touch;height:.8rem;}
.topnav_list::-webkit-scrollbar{display:none}
.topnav_item{position:relative;display:inline-block;padding:0 .5em;font-size:.32rem;text-align:center;opacity:.75}
.topnav_item.current{opacity:1;}
.topnav_item.current{-webkit-transform:scale(1.125);-ms-transform:scale(1.125);transform:scale(1.125)}
.main_nav_wrap{padding:0 .3rem}
.topnav_list_contain{position:relative;z-index:100}
.has_subnav .topnav_list_contain{border-bottom:1px solid #d51c1c}
.topnav_list_contain::before,.topnav_list_contain::after{content:" ";display:block;position:absolute;top:0;height:.8rem;width:.4rem;z-index:100;border-left:.08rem solid #f33;background:-webkit-linear-gradient(left,#f33 0,rgba(255,51,51,0) 100%);background:linear-gradient(to right,#f33 0,rgba(255,51,51,0) 100%);pointer-events:none;-webkit-transition:.25s;transition:.25s}
.topnav_list_contain::before{left:-0.05rem;opacity:0}
.topnav_list_contain::after{right:.42rem;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.topnav_list_contain.onscroll::before{opacity:1}
.topnav_list_scroll_wrap{height:.8rem;overflow:hidden}
</style>

<div class="navdivwrap top_<%=id%>">
<div class="navdiv topnav_list_contain">
                    
<ul class="topnav_list">
    <li class="topnav_item"><div class="topnav_item_box"><a href="/wap/">首页</a></div></li>
    <li class="top_7 topnav_item"><div class="topnav_item_box"><a href="/wap/class.asp?id=7">文萃</a></div></li>
    <li class="top_22 topnav_item"><div class="topnav_item_box"><a href="/wap/class.asp?id=22">下载</a></div></li>
    <li class="top_11 topnav_item"><div class="topnav_item_box"><a href="/wap/Learn.asp">学习</a></div></li>
    <li class="top_285 topnav_item"><div class="topnav_item_box"><a href="/wap/list.asp?id=285">公号</a></div></li>
    <li class="top_1373 topnav_item"><div class="topnav_item_box"><a href="/wap/list.asp?id=1373">APP</a></div></li>
    <li class="top_8 topnav_item"><div class="topnav_item_box"><a href="/wap/Guestbook.asp?ac=add">留言</a></div></li>
</ul>                  

<script type="text/javascript">
    $(document).ready(function(){
        $('.topnav_list li').click(function() {
        $(this).addClass('current').siblings().removeClass('current');
        })
    })
</script>
</div>
</div>