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

Question

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

这是我的 JQuery --->

<script>
$(function() {  
$('.full-web').click(function(){
    $(this).css('backgroundColor', '#e9f7ff');
    $(this).css('color', '#000828');
    $(this).css('borderBottomColor', '#000828');
    $(this).css('borderBottomWidth', '10px')

  });
});
</script>

HTML --->

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

CSS --->

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

Answer 1

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