zoukankan      html  css  js  c++  java
  • 在刷新状态下给导航条,选项卡链接加底色

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

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

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

    示例:给导航条加底色                                                                                                                                                                                                                                               

    导航条html代码:

     1   <div id="nav">
     2                 <li class="fl on1"><a href="/index.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">首页</a></li>
     3                 <li class="fl ap" id="nav_menu">
     4                     <a href="${SiteLink}" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">建站服务
     5                     </a>
     6                     <div class="tc ab10 line_height_30 display_none" id="div1">
     7                         <div class="space_05"></div>
     8                          ${jzfw}
     9                         <div class="space_05"></div>
    10                     </div>
    11                 </li>
    12                 <li class="fl ap" id="yxid"><a href='${YXLink}' class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">整合营销 </a>
    13                     <div class="tc ab10 line_height_30 display_none" id="div3">
    14                         <div class="space_05"></div>
    15                          ${zhyx}
    16                         <div class="space_05"></div>
    17                     </div>
    18 
    19                 </li>
    20                 <li id="pp" class="fl ap">
    21                     <a href="${ProductPriceLink}" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">产品报价</a>
    22                        <div class="tc ab10 line_height_30 display_none" id="div2">
    23                         <div class="space_05"></div>
    24                         ${cpjg}
    25                         <div class="space_05"></div>
    26                     </div>
    27                 </li>
    28                 <li class="fl"><a href="/MessageList/messagelist-page1.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">资讯</a></li>
    29                 <li class="fl"><a href="/AboutUs/AboutUsDetail.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">联系我们</a></li>
    30             </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");
                 });
    
             });

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

      

  • 相关阅读:
    LeetCode 24. Swap Nodes in Pairs (两两交换链表中的节点)
    LeetCode 1041. Robot Bounded In Circle (困于环中的机器人)
    LeetCode 1037. Valid Boomerang (有效的回旋镖)
    LeetCode 1108. Defanging an IP Address (IP 地址无效化)
    LeetCode 704. Binary Search (二分查找)
    LeetCode 744. Find Smallest Letter Greater Than Target (寻找比目标字母大的最小字母)
    LeetCode 852. Peak Index in a Mountain Array (山脉数组的峰顶索引)
    LeetCode 817. Linked List Components (链表组件)
    LeetCode 1019. Next Greater Node In Linked List (链表中的下一个更大节点)
    29. Divide Two Integers
  • 原文地址:https://www.cnblogs.com/eggTwo/p/3531495.html
Copyright © 2011-2022 走看看