css/jquery для сохранения подсветки выбранного «li»

Question

Я изо всех сил пытаюсь выяснить, как сохранить выделенный цвет элемента «li», пока не будет выбрано другое «li».

Я прочитал несколько ответов здесь, в stackoverflow, но ни один из них, похоже, не работает для меня.

Могу я запросить о помощи? Я попытался добавить & удаление класса для установки свойства & jquery способ настройки свойства. Однако я не смог получить то, что мне нужно.

Я открыт для этого с помощью CSS или JQUERY.

CSS-я имею в

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 2; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#cssmenu { 
    width: auto; 
    margin-top: 68px; 
    margin-left: 6px; 
    margin-right: 6px; 
    border-top: double; 
    border-left: double; 
    border-right: double; 
    border-bottom: none; 
    border-color: brown; 
} 

#cssmenu.align-right ul li { 
    float: right; 
    border-right: 0; 
    border-left: 1px solid rgba(0, 0, 0, 0.22); 
} 

#cssmenu.align-right ul li a { 
    border-right: 0; 
    border-left: 1px solid rgba(255, 255, 255, 0.15); 
} 

#cssmenu ul { 
    background: #222222; 
    /* Old browsers */ 

    background: -moz-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%); 
    background: -webkit-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%); 
    background: -o-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%); 
    background: -ms-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%); 
    background: linear-gradient(to top, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%); 
} 

#cssmenu:after, 
#cssmenu ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#cssmenu ul li { 
    float: left; 
    display: block; 
    border-right: 1px solid rgba(0, 0, 0, 0.22); 
    z-index: 1; 
} 

#cssmenu ul li::after { 
    content: ""; 
    width: 100%; 
    height: 8px; 
    position: absolute; 
    border-top-left-radius: 50% 4px; 
    border-top-right-radius: 50% 4px; 
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); 
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); 
    background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); 
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); 
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 
    z-index: 2; 
    bottom: 10px; 
} 

#cssmenu ul li a { 
    display: block; 
    padding: 10px 30px; 
    text-decoration: none; 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #ffffff; 
    border-right: 1px solid rgba(255, 255, 255, 0.15); 
    z-index: 3; 
} 

#cssmenu ul li a:hover, 
#cssmenu ul li.active a { 
    color: #ffffff; 
} 

#cssmenu ul li:hover, 
#cssmenu ul li.active { 
    background: #1275ae; 
    /* Old browsers */ 

    background: -moz-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%); 
    background: -webkit-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%); 
    background: -o-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%); 
    background: -ms-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%); 
    background: linear-gradient(to top, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%); 
} 

#cssmenu ul li:hover::after, 
#cssmenu ul li.active::after { 
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%); 
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%); 
    background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%); 
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%); 
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 
} 

HTML-код

<!doctype html> 
<html lang=''> 
    <head> 
     <meta charset='utf-8'> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!--link rel="stylesheet" href="css/revised.css"--> 
     <link rel="stylesheet" type="text/css" href="css/master.css"> 
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#page1").click(function(){ 
       // $(this).css("background-color","black"); 
       $('#rbl').load('main.php #tbl1'); 
       if ($(this).hasClass('active')) { 
        $(this).removeClass('active') 
       } 
       else { 
        $(this).addClass('active') 
       } 
      }); 

      $("#page2").click(function(){ 
       setDivProps(); 
       $('#rbl').load('main.php #tbl2'); 
      }); 

      $("#page3").click(function(){ 
       setDivProps(); 
       $('#rbl').load('main.php #tbl3'); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
     <div> 
     <div id='cssmenu'> 
      <ul> 
       <li class='active'><a id="home1" href='#' ><span>HOME</span></a></li> 
       <li><a id="page1" href="#"><span>OPTION1</span></a></li> 
       <li><a id="page2" href="#"><span>OPTION2</span></a></li> 
       <li><a id="page3" href="#"><span>OPTION3</span></a></li> 
      </ul> 
     </div> 
     </div> 
     <div id="rbl"> </div> 
    </body> 
<html> 

пример:

http://jsfiddle.net/xp84q1ys/

Answer 1

Используйте этот код JQuery:

$(document).ready(function(){ 
    $('#cssmenu li').click(function(){ 
     $("#cssmenu li").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
     }); 

Работая здесь: https://jsfiddle.net/3aLx7dph/