在刷新状态下给导航条,选项卡链接加底色

一般情况，对于网站导航条以及分类选项卡在选中的状态下都需要加一个底色在上面，对应页面不刷新的情况下用js或者jquery都能很方便的实现。

但是对应导航条好选项卡是超链接的情况下，页面就要刷新了，怎么能够让网站在刷新的情况下记住上次选择的导航条或者选项卡呢？

我的实现方法是通过url参数传递选择的锚点。在页面刷新后通过var url = window.location.href;获取选择的导航条或者选项卡，然后再通过js或者jquery取得对应的参数，通过参数给对应的锚点加底色。

示例：给导航条加底色                                                                                                                                                                                                                                               

导航条html代码：

  <div id="nav">
                <li class="fl on1"><a href="/index.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">首页</a></li>
                <li class="fl ap" id="nav_menu">
                    <a href="${SiteLink}" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">建站服务
                    </a>
                    <div class="tc ab10 line_height_30 display_none" id="div1">
                        <div class="space_05"></div>
                         ${jzfw}
                        <div class="space_05"></div>
                    </div>
                </li>
                <li class="fl ap" id="yxid"><a href='${YXLink}' class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">整合营销 </a>
                    <div class="tc ab10 line_height_30 display_none" id="div3">
                        <div class="space_05"></div>
                         ${zhyx}
                        <div class="space_05"></div>
                    </div>

                </li>
                <li id="pp" class="fl ap">
                    <a href="${ProductPriceLink}" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">产品报价</a>
                       <div class="tc ab10 line_height_30 display_none" id="div2">
                        <div class="space_05"></div>
                        ${cpjg}
                        <div class="space_05"></div>
                    </div>
                </li>
                <li class="fl"><a href="/MessageList/messagelist-page1.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">资讯</a></li>
                <li class="fl"><a href="/AboutUs/AboutUsDetail.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">联系我们</a></li>
            </div>

JS代码：

 

 $(function () {
             var tag;
             var url = window.location.href;
             $("#nav li").removeClass('on1');
             if (url.indexOf("index") > 0) {
                 $("#nav li").eq(0).addClass('on1');
                 tag = 0;
                // return;
             }
             else if (url.indexOf("SiteServerDetail") > 0) {
                 $("#nav li").eq(1).addClass('on1');
                 tag = 1;
                // return;
             }
             else if (url.indexOf("YingXiaoDetail") > 0) {
                 $("#nav li").eq(2).addClass('on1');
                 tag = 2;
                // return;
             }
             else if (url.indexOf("ProductPriceDetail") > 0) {
                 $("#nav li").eq(3).addClass('on1');
                 tag = 3;
                // return;
             }
             else if (url.indexOf("messagelist") > 0) {
                 $("#nav li").eq(4).addClass('on1');
                 tag = 4;
                // return;
             }
             else if (url.indexOf("AboutUsDetail") > 0) {
                 $("#nav li").eq(5).addClass('on1');
                 tag = 5;
                 //return;
             }           
             $("#nav li").mouseover(function () {
                 
                 $("#nav li").removeClass('on1');
                 $("#nav li").eq(tag).addClass('on1');
                 $(this).addClass("on1");
             });
             $("#nav li").mouseout(function () {
                
                 $("#nav li").removeClass('on1');
                 $("#nav li").eq(tag).addClass('on1');
                // $(this).addClass("on1");
             });

         });

根据这个方法，灵活的应用，就能处理大部分这类问题。