如何更改使用jQuery的導航鏈接的顏色或背景色？

有人能知道，什麼是錯我的代碼？當你在頁面中時，當前的顏色或背景將會改變。例如顏色是NAV的是紅色的，所以當你去到關於我們它的顏色會發黃和鏈接的其餘部分仍然是紅色，這裏是我的小提琴：如何更改使用jQuery的導航鏈接的顏色或背景色？

<ul class="topnav" id="main-menu"> 
     <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li> 
     <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li> 
     <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li> 
     <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li> 
    </ul> 


#main-menu li { 
display: inline-block; 
font-family: 'Raleway', sans-serif; 

padding: 17px 25px; 
} 
#main-menu li a { 
    color:#333333; 
    font-size:15px; 
} 
#main-menu li.active a { 
color:#0198cf; 
} 
#main-menu li:last-child { 
padding-right: 0; 
} 
.active{background-color:#ccc;} 



$(document).ready(function(e){ 
    $('#main-menu li').click(function(e) { 
    $('#main-menu li').removeClass('active'); 
    $(this).addClass('active'); 
    }); 
});

PS：我使用的header.php，所以如果答案是把活動類的每一頁我並不需要複製所有的資產淨值在每一個頁面，所以基本上不是一個答案

來源

2017-10-16 Mer Man

如果您在jsfiddle中添加jquery，當您在下拉菜單中單擊它時，它應該可以工作。 –

請檢查。這是工作。你忘了把jQuery min文件。

$(document).ready(function(e){ 
 
    $('#main-menu li a').click(function(e) {   
 
    $('#main-menu li a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
});

#main-menu li { 
 
    display: inline-block; 
 
    font-family: 'Raleway', sans-serif; 
 
    padding: 17px 25px; 
 
} 
 
#main-menu li a { 
 
    color:#333333; 
 
    font-size:15px; 
 
} 
 
#main-menu li.active a { 
 
    color:#0198cf; 
 
} 
 
#main-menu li:last-child { 
 
    padding-right: 0; 
 
} 
 
.active{ 
 
    background-color:#ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="topnav" id="main-menu"> 
 
    <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li> 
 
    <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li> 
 
    <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li> 
 
    <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li> 
 
</ul>

來源

2017-10-16 04:07:07

仍然沒有工作我已經有jQuery的分，但仍當我點擊其他鏈接，然後當它轉到頁灰色還是在家裏這將是灰色的，:( –

它工作時，它是< a href="#">但是當我把該鏈接，它不工作 –

怎麼樣？到STIO默認行爲？ –

您選擇李，而不是你應該單擊事件選擇裏的內部。

$(document).ready(function(e){ 
    $('#main-menu li').click(function(e) { 
     $('#main-menu li a').removeClass('active'); 
     $(this).children("a").addClass('active'); 
    }); 
    });

來源

2017-10-16 04:12:34

仍然沒有工作我已經有jQuery的分，但仍時我點擊了鏈接等將是灰色的，然後當它轉到頁灰色還是在家裏，:( –

它工作時，它是< a href="#">，但是當我把鏈接，它不工作 –

的jQuery的版本您正在使用？我做你的小提琴測試並在那裏工作。 –

如何更改使用jQuery的導航鏈接的顏色或背景色？

回答

相關問題