html - How can I avoid that JQuery reloads in Rails when clicking an option from a menu -

i have menu , has hover property. when click on selected option retains background color (example: red ).

i notice when clicking option reloads again whole code , that's why background colour stays seconds until whole page reloads. code:

css code:

#menu {     float:right;     height: 100%;     /*background-color: green;*/ }   #menu-icon {     display: none;     height: 40px;     width:100px;     line-height: 40px;     border-radius: 0 8px 0 0;     margin:0;     background: #fabb00;     background: url("../images/menu_icon.png") center;     text-align: center;     color: #003d72;     font-weight: 600;     font-size: 1em; }  #menu ul {     margin: 0;     padding: 0; }  #menu ul li {     display: inline-block;     height: 60px;     width:150px;     line-height: 60px;     margin: 0 10px 0 0;     background: #eee;     border-radius: 0 16px 0 16px;     text-align: center;     }  #menu ul li.last {     margin:0; }  #menu ul li:hover{     background-color:#fabb00; }  /*#menu ul li.active {     background: #fabb00; }*/   #menu ul {     color: #003d72;     font-weight: 600;     font-size: 1.4em; } 

in 1 partial have:

<script >   $(function () {     $('ul li').on("click",function(){             $(this).css('background','red');                 });  });   </script> 

view of b

<h1>view of b</h1> <%= render "partials/highlight" %> 

html code:

<div id="menu">               <a href="#" id="menu-icon">menu</a>               <ul>                 <a href="http://localhost:3000/a"><li class="active">a</li></a>                 <a href="http://localhost:3000/b"><li>b</li></a>                 <a href="http://localhost:3000/c"><li>c</li></a>                 <a href="#"><li class="last">d</li></a>               </ul>             </div> 

for example, when clicking b calls http://localhost:3000/b , why view b again called , partial (jquery) , in way waits again click.

but how can avoid jquery code reloads when clicking option?

the structure wrong. has be:

<ul>   <li class="active"><a href="http://localhost:3000/a">a</li></a>   <li><a href="http://localhost:3000/b">b</a></li>   <li><a href="http://localhost:3000/c">c</a></li>   <li class="last"><a href="#">d</a></li> </ul> 

the <ul> cannot have other element other <li> descendant.