Question

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

这是我的JQuery ---＆gt;

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

  });
});
</script>

HTML ---＆gt;

<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 ---＆gt;

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>

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

1 个答案: