活动选项卡背景在页面加载时发生更改

Active tab background gets changed on page load

本文关键字：加载 选项 背景 活动      更新时间：2023-09-26

我已经尝试使用此代码在单击时更改li标记的background-color。当我们:hover或单击时，它正在更改background-color，但当它导航到页面时，它不会保持不变，而是显示为默认颜色。基本上，我想要一个活动的选项卡背景颜色，但正如我所提到的，它在页面刷新（重新加载）时会恢复到默认颜色。

请提供建议。

  <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
  <script type="text/javascript">
      $( document ).ready( function(){
          $('.nan_canada').on('click','.menuil',function () {
             $(this).addClass('selected')
          });
      });
  </script>
 <div class="nan_canada">
     <ul >
        <li class="menuil" ><a href="a.php">Resume Template & LinkedIn Podcasts</a></li>
        <li class="menuil"><a href="jas.php" >Job Postings </a></li>
        <li class="menuil"><a href="a.php">   Search Firms</a></li>
        <li class="menuil"><a href="aj.php" target="_blank"> nav</a></li>
        <li class="menuil"><a href="books.php">Book List </a></li>
        <li class="menuil"><a href="#"> Order Free Book </a></li>            
        <strong><font size="4" style="float:right; padding-right:10px;"><a href="at.php" style="color:#fff;">Log Out</a></font></strong> </ul>
    </div>
    <style type="text/css">
        .menuil {
               color:#000000;
         }
        .menuil  #selected_step_box, 
        .QuickStartLong:hover {
               background-color: #fff; !important
         }
         .selected {
               background-color : #fff;
         }
     </style>

实际上是因为重定向，当你点击链接它时，它会将你重定向到一个新页面。并且每次脚本从开始加载。你能做的一件事（据我所知）。

给每个列表项加一个唯一的id，有些类似的东西。

    <li class="menuil" id='l1'><a href="a.php">Resume Template & LinkedIn Podcasts</a></li>
                                                    .
                                                    .
                                                    .

创建一个js文件，并将其包含在所有列表页面中。

var page = $(location).attr('href');//use string function to get page name
switch(page)
{
  case 'youpage1':
    $('#l1').addClass('selected');
    break;
   case 'youpage2':
    $('#l2').addClass('selected');
    break;
   .
   .
   .
}
相关文章：