Question

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

请指教。

  <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>

Answer 1

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

为每个列表项添加一个唯一的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;
   .
   .
   .
}

活动标签背景在页面加载时更改

1 个答案: