jquery实现点击a标签跳转到新页面后,给被点击的那个a标签添加样式

需求 

如图所示，我希望点击“饮料酒水”跳转页面后，“饮料酒水”旁边会出现一个黄色的span,而其他没有被点击的项目没有这个黄色的span。

“饮料酒水”是一个a标签，a标签的href就是图中的url,而我标红的那串数字就是"饮料酒水"的id。我给相应的span也加上了统一的id——也是这串数字。这样，如果我们获取url里的这串id数字，就能用这个id找到我需要显示的span，也就能实现我的需求了。

HTML

<aside>
    <menu>
        <ul>
            
             <li>
                <span class='yellowside'id='104749''></span>
                <a href="/supermarket/104749/0/">热销榜</a>
            </li>
            
             <li>
                <span class='yellowside'id='106084''></span>
                <a href="/supermarket/106084/0/">整箱购</a>
            </li>
            
             <li>
                <span class='yellowside'id='103532''></span>
                <a href="/supermarket/103532/0/">优选水果</a>
            </li>
            
             <li>
                <span class='yellowside'id='103549''></span>
                <a href="/supermarket/103549/0/">饮料酒水</a>
            </li>
            
             <li>
                <span class='yellowside'id='103536''></span>
                <a href="/supermarket/103536/0/">牛奶面包</a>
            </li>
            
             <li>
                <span class='yellowside'id='106078''></span>
                <a href="/supermarket/106078/0/">冷饮冻食</a>
            </li>
            
             <li>
                <span class='yellowside'id='103541''></span>
                <a href="/supermarket/103541/0/">休闲零食</a>
            </li>
            
             <li>
                <span class='yellowside'id='103557''></span>
                <a href="/supermarket/103557/0/">方便速食</a>
            </li>
            
             <li>
                <span class='yellowside'id='103569''></span>
                <a href="/supermarket/103569/0/">粮油调味</a>
            </li>
            
             <li>
                <span class='yellowside'id='103565''></span>
                <a href="/supermarket/103565/0/">肉蛋时蔬</a>
            </li>
            
             <li>
                <span class='yellowside'id='103575''></span>
                <a href="/supermarket/103575/0/">生活用品</a>
            </li>
            
        </ul>
    </menu>
</aside>

CSS 

/*下面是span的样式，默认span是不显示的*/
.yellowside{
    background-color:#ffd600;
    width:0.1rem;
    height:90%;
    position: absolute;
    left:0;
    top:0.05rem;
    display:none;
}

JS

$(document).ready(function(){

    //先获取当前页面的路由里面的路径，也就是/supermarket/104749/0/这部分
    var str=window.location.pathname
    //分割字符串，变成一个数组
    var strlist=new Array()
    strlist=str.split('/')
    //获取列表里的第2个元素，也就是那串id,比如104749，这串数字正好就是需要显示的span的id
    var categoryid=strlist[2]
    //用id获取span
    var yellowspan=$('#'+categoryid)
    //修改span的css样式
    yellowspan.css('display','block')

})

注意：我这个例子的特殊性在于，url里面有两串数字，只有第一串数字能决定哪个a标签前面有黄色的span，第二串数字变了只是商品被二次筛选，所以我这里比较麻烦。如果a标签的样式和整个url是一一对应的关系，就不需要像我这样分割url，直接整体对比就行了。

 

 

如果这篇博文帮到了你，就请给我点个赞吧(#^.^#)

有疑问也欢迎留言~博主可nice啦，在线秒回ヾ(◍°∇°◍)ﾉﾞ