怎樣實作頂部導航欄高亮顯示（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/" target="_blank" rel="external nofollow" >首頁</a></div></li>
    <li class="top_7 topnav_item"><div class="topnav_item_box"><a href="/wap/class.asp?id=7" target="_blank" rel="external nofollow" >文萃</a></div></li>
    <li class="top_22 topnav_item"><div class="topnav_item_box"><a href="/wap/class.asp?id=22" target="_blank" rel="external nofollow" >下載下傳</a></div></li>
    <li class="top_11 topnav_item"><div class="topnav_item_box"><a href="/wap/Learn.asp" target="_blank" rel="external nofollow" >學習</a></div></li>
    <li class="top_285 topnav_item"><div class="topnav_item_box"><a href="/wap/list.asp?id=285" target="_blank" rel="external nofollow" >公号</a></div></li>
    <li class="top_1373 topnav_item"><div class="topnav_item_box"><a href="/wap/list.asp?id=1373" target="_blank" rel="external nofollow" >APP</a></div></li>
    <li class="top_8 topnav_item"><div class="topnav_item_box"><a href="/wap/Guestbook.asp?ac=add" target="_blank" rel="external nofollow" >留言</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>