刷新页面后怎样让hover样式停留不消失

1、网站导航栏

　　咱们所熟知的网站导航栏，无非就是网站标题以横、纵向方式排列，用户点击之后进入相应的页面来展现网站内容，达到传达信息的目的。

　　

　　用户点击进入一个页面，若是在刷新后此导航栏有文字有相应的颜色、背景变化，那么将会有一个很好的用户体验，此时就涉及到CSS的hover样式、jQuery的触发事件了。

2、hover样式

       鼠标扫过文字时，文字的背景、颜色变化，这样作很简单：

       a:hover{}，一句话就能够搞定；但若是要点击刷新后仍然存在鼠标刷新的样式，就有点上层次了。

       具体问题具体分析：

       一、根据使用的不一样框架来定

       二、CMS本身封装了相应的方法

       三、导航栏单独作成头部文件，利用ajax无刷新技术得以实现头部无刷新，只变化内容区域就更简单点

       四、导航栏每一个按钮都有固定的、以ID结尾的连接（以DEDE为例）

                 /plus/list.php?tid=一、

    /plus/list.php?tid=二、

    /plus/list.php?tid=三、

    /plus/list.php?tid=4

3、简单实现步骤

       下面就讲第四种状况的实现方法（其它3种由于本人能力有限，待之后继续更新）：

        HTML :很简单的导航条代码

    <ul>    
        <li><a href="/plus/list.php?tid=1"></a></li>
        <li><a href="/plus/list.php?tid=2"></a></li>
        <li><a href="/plus/list.php?tid=3"></a></li>
        <li><a href="/plus/list.php?tid=4"></a></li>
        <li><a href="/plus/list.php?tid=5"></a></li>
    </ul>

         jQuery: hover方法、each方法判断是当前页面第一个a标签对象的href属性

    $(function(){    
        $("ul>li").hover(function(){
            $(this).children("a").addClass("");
        },function(){
            $(this).children("a").removeClass("");
            
            $("ul>li>a").each(function(){
                $this = $(this);
                if ($this[0].href == String(window.location)){
                    $this.addClass("");
                }
            });
        });
        $("ul>li>a").each(function(){
            $this = $(this);
            if ($this[0].href == String(window.location)){
                $this.addClass("");
            }
        });
    });

       由于有多个a标签，因此要遍历当前页面所在第一个a标签对象，获取它的href属性，来与所在页面连接作对比，若是符合就添加对应的hover css样式；但问题来了，样式已经添加，鼠标通过此文字离开时又移除了该属性，咱们再次将下面这条语句复制进hover移除后的句子后面，再次强制添加该属性，就成功解决了！

4、遗留问题、改进方向

       一、 /plus/list.php?tid=1，该导航按钮此时有了咱们须要的样式，但若是点击此导航页面下面的子连接，页面变成了子连接所在的页面，但还属于此导航栏目的子栏目，此时的导航按钮就失去了样式。

       二、利用jQuery实现浏览器兼容性更加好，css3等新技术能够对本身的我的网站作实验。

       三、能让子栏目智能识别父栏目才是解决问题的最好办法。