如何使用JQuery更改列表项的颜色

我有一个菜单，当单击某些项目（li类）时，它会滚动到适当的点。我想知道，当同一个列表项在适当的位置滚动时，如何保持它处于特定的状态，并根据单击的列表项将其相应地更改回来？任何帮助都会很好

这是我的JQuery-->

完整网站
用户界面/设计
登录页
网页横幅
电子邮件设计
印刷广告

$（'li.full-web，li.ui，li.landing-page，li.web，li.email，li.print'）。单击(
职能（e）{
e、 preventDefault；//不跟随链接
$（'.highlight'）.removeClass（'highlight'）；
$（this.addClass（'highlight'））
});
.亮点{
背景色：#e9f7ff！重要；
颜色：#000828！重要；
边框底部：10px实心#000828！重要；
}

这么多

$（这个）

ES！只需储存一次！或者更好的是，不要这样做<代码>this.style.backgroundColor='#e9f7ff'等等。或者更好：

this.style.cssText='背景色：#e9f7ff；颜色：#000828；…'或者，像这样传递一个对象：
$（this）.css（{backgroundColor:'.\e9f7ff'，color:'.\000828'，borderBottomColor:'.\f000828'，borderBottomWidth:'10px'）
<script>
$(function() {  
$('.full-web').click(function(){
    $(this).css('backgroundColor', '#e9f7ff');
    $(this).css('color', '#000828');
    $(this).css('borderBottomColor', '#000828');
    $(this).css('borderBottomWidth', '10px')

  });
});
</script>

<nav class="container">
<ul>
<li class="full-web" style="background-color:#3a9bc3;">FULL WEBSITES</li>
<li class="ui" style="background-color:#50a2c3;">UI/DESIGN</li>
<li class="landing-pages" style="background-color:#65a8c3;">LANDING PAGES</li>
<li class="web" style="background-color:#59a5c3;">WEB BANNERS</li>
<li class="email" style="background-color:#4aa0c3;">E-MAIL DESIGNS</li>
<li class="print" style="background-color:#3a9bc3;">PRINT ADS</li>
</ul>
</nav>
</div>

nav.container ul {
    height:60px;
    top:0px;
    margin:0px!important;
    padding:0px!important;
    text-align:center;
}

nav.container {
    position:relative;
    top:-5px;
    width:100%;
    height:60px;
    background-color:#1e94c4;
    z-index:50;
    border-bottom:5px solid #b7e9fc;
}

li.full-web, li.ui, li.landing-pages, li.web, li.email, li.print, li.resume, li.about, li.contact {
    position:relative;
    margin-right:-4px;
    padding-left:13px;
    padding-right:13px;
    padding-top:0px;
    top:0px;
    left:0px;
    font-family:myriad pro, arial, sans-serif;
    color:#ffffff;
    font-size:1.75em;
    text-align:center;
    line-height:2.15em;
    outline:none;   
    list-style:none;
    display:inline-block;
    transition:750ms;
    -webkit-transition:750ms;
}

li.full-web:hover, li.ui:hover, li.landing-pages:hover, li.web:hover, li.email:hover, li.print:hover, li.resume:hover, li.about:hover, li.contact:hover {
    cursor:pointer;
    background-color:#e9f7ff!important;
    color:#000828;
    border-bottom:10px solid #000828;
    transition:100ms;
    -webkit-transition:100ms;
}

li.full-web:active, li.ui:active, li.landing-pages:active, li.web:active, li.email:active, li.print:active, li.resume:active, li.about:active, li.contact:active {
    top:0px;
    border-bottom:10px solid #86cbe8;
    cursor:pointer;
    outline:none;
    transition:250ms;
    -webkit-transition:250ms;
}

<nav class="container">
<ul>
<li class="full-web" style="background-color:#3a9bc3;">FULL WEBSITES</li>
<li class="ui" style="background-color:#50a2c3;">UI/DESIGN</li>
<li class="landing-pages" style="background-color:#65a8c3;">LANDING PAGES</li>
<li class="web" style="background-color:#59a5c3;">WEB BANNERS</li>
<li class="email" style="background-color:#4aa0c3;">E-MAIL DESIGNS</li>
<li class="print" style="background-color:#3a9bc3;">PRINT ADS</li>
</ul>
</nav>
</div>

<script>
$('li.full-web, li.ui, li.landing-pages, li.web, li.email, li.print').click(
function(e){
    e.preventDefault; // don't follow the link
    $('.highlight').removeClass('highlight');
    $(this).addClass('highlight')
});
</script>

<style>
.highlight {
    background-color:#e9f7ff!important;
    color:#000828!important;
    border-bottom:10px solid #000828!important;
}
</style>