我正在为我的网站设计一个垂直菜单，并试图在点击导航项和使用jQuery加载页面时改变导航项的背景颜色。它会变更背景，直到页面未载入为止。载入页面时，背景变更并不存在。我在关注this fiddle。我正在设计类似于w3school的左导航菜单，当一个项目被点击时，它会保留该li/a/导航项目的背景变化。如何正确地编写代码，以便为下一次加载保留该特定链接/导航项的背景更改？这是我的代码。

$('.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>