在单击菜单中的选项时，如何避免JQuery在Rails中重新加载

我有一个菜单和它有悬停属性。我想，当点击选中的选项时，它会保留背景色，例如：红色

我注意到，当点击一个选项时，它会再次重新加载整个代码，这就是为什么背景颜色会停留几秒钟，直到整个页面重新加载。代码如下：

CSS代码：

#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 a {
    color: #003d72;
    font-weight: 600;
    font-size: 1.4em;
}

在一部分中，我有：

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

});
  </script>

HTML代码：

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

例如，当单击b时，它调用http://localhost:3000/b 这就是为什么会再次调用b的视图以及部分JQuery，并以这种方式再次等待单击

---

但是如何避免在单击任何选项时重新加载JQuery代码？

结构本身是错误的。它必须是：

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

除作为其子代之外，不能有任何其他元素

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