时间戳

首页 > 解决方案 > 为下一次加载更改所选导航的背景

javascript - 为下一次加载更改所选导航的背景

问题描述

我正在为我的网站设计一个垂直菜单，并尝试在单击导航项并使用 jQuery 加载页面时更改其背景颜色。它会更改背景，直到页面未加载。加载页面时，不存在背景更改。我正在关注这个小提琴。当单击一个项目时，我正在设计类似于 w3school 左侧导航菜单，它保留该 li/a/navigation 项目的背景更改。如何正确编码以保持该特定链接/导航项的背景更改，以便下次加载？这是我的代码。

$('.widget_nav_plus_widget a').click(function(e) {
    $('.widget_nav_plus_widget a').removeClass('current_page_item');
    $(this).addClass('current_page_item');

});
.widget_nav_plus_widget{
    width: 100%;
    height: 30em;
    border: 1px solid #ccc;
    padding: 0;
    overflow: scroll;
    overflow-x: hidden;
}
.widget_nav_plus_widget ul li {
    border-top: 1px solid #ccc;
   background-color:#236870;
    margin-left: -30px;
    margin-right: -30px;
    line-height:1.7em;
    }

.widget_nav_plus_widget ul li a{
color:white;
 text-decoration: none;
  display:block;
} 
.widget_nav_plus_widget ul li a:hover{
color:white;
 display:block;  
  text-indent: 1em;
   background-color:#0034a1;
}
.widget_nav_plus_widget ul ul li{
    text-indent: 1em;
     background-color: white;
     color:black;
    margin-top:-10px;
}
.widget_nav_plus_widget ul ul li a{
color:black;
 text-decoration: none;
    display:block;
  } 
.widget_nav_plus_widget ul ul li a:hover{
color:white;
    display:block;
  text-indent: 1em;
      background-color:#4ba668;
   }
.widget_nav_plus_widget ul ul ul li{
    text-indent: 3em;
}   
.widget_nav_plus_widget ul ul ul li:hover{
    text-indent: 3em;
}
.widget_nav_plus_widget ul ul ul li a:hover{
color:white;
    display:block;
  text-indent: 3em;
      background-color:#4ba668;
      
}

.current_page_item{
   background-color:#4ba668;
  color: white;
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id="nav_plus_widget-2" class="widget inner-padding widget_nav_plus_widget XXsnipcss_extracted_selector_selectionXX">
  <div class="menu-cpp-main-menu-duplicate-container">
    <ul id="menu-cpp-main-menu-duplicate" class="menu">
      <li id="menu-item-2486" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2486">
        <a href="#" tabindex="1" >
          Basics
        </a>
        <ul class="sub-menu">
       
          <li id="menu-item-2463" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2463">
            <a href="#cpp-loops" tabindex="1">
              C++ Loops
            </a>
          </li>
          <li id="menu-item-2464" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2464">
            <a href="#c-functions" tabindex="1">
              C++ Functions
            </a>
            <ul class="sub-menu">
              <li id="menu-item-2465" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2465">
                <a href="#cpp-functions-overloading" tabindex="1">
                  C++ Functions Overloading
                </a>
              </li>
            </ul>
          </li>
          <li id="menu-item-2466" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2466">
            <a href="#cpp-structure" tabindex="1">
              C++ Structures
            </a>
          </li>
          <li id="menu-item-2467" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2467">
            <a href="#cpp-pointers" tabindex="1">
              C++ Pointers
            </a>
          </li>
        </ul>
      </li>
      <li id="menu-item-2468" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2468">
        <a href="#cpp-object-oriented-programming" tabindex="1">
          C++ Object Oriented Programming
        </a>
        <ul class="sub-menu">
          <li id="menu-item-2469" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2469">
            <a href="#c-classses-objects" tabindex="1">
              C++ Classses and Objects
            </a>
          </li>
          <li id="menu-item-2470" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2470">
            <a href="#cpp-inheritance" tabindex="1">
              C++ Inheritance
            </a>
          </li>
          
      </ul>
    </ul>
  </div>
</aside>

标签： javascripthtmljquerycss

解决方案

你可以使用 Localstorage，我在你的 JS 代码中做了一些更改。

const currentPage = localStorage.getItem("currentPage");
$(`a[href='${currentPage}']`).addClass('current_page_item');

$('.widget_nav_plus_widget a').click(function(e) {
    $('.widget_nav_plus_widget a').removeClass('current_page_item');
    $(this).addClass('current_page_item');
    localStorage.setItem("currentPage", $(this).attr('href'));

});

推荐阅读