如何使用jQuery更改列表項顏色

我有一個菜單，當某些項目（li類）被點擊時，它會滾動到適當的點。我想知道如何在適當的時候將相同的列表項保持在某個特定的狀態，並根據點擊的列表項將其改回來。任何幫助都會很棒。如何使用jQuery更改列表項顏色

這裏是我的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; 
}

來源

2013-11-24 Marlon Fowler

這麼多'$（這一點）'ES！只需存儲一次！或者更好的是，不要這樣做！ 'this.style.backgroundColor ='＃e9f7ff';'等等。或者更好：'this.style.cssText ='background-color：＃e9f7ff;顏色：＃000828; ......';' –

或者，傳遞一個對象，如下所示：'$（this）.css（{backgroundColor：'＃e9f7ff'，color：'＃000828'，borderBottomColor：'＃000828'， borderBottomWidth： '10px的'}）;' – itsmikem

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

來源

2013-11-24 01:19:05

如何使用jQuery更改列表項顏色

回答

相關問題