點擊導航欄上的顏色改變顏色

我在第一次訪問網站時遇到了問題。我已經成功地在頂部創建了一個導航欄，它看起來和行爲有點像我想要的（除了顏色方案，但可以稍後）。問題在於，無論何時點擊欄上的不同鏈接，我都希望該框改變顏色，但目前它在主頁上突出顯示。我認爲這是超級簡單的東西，但我找不到它。感謝您的幫助。點擊導航欄上的顏色改變顏色

body 
 
{ 
 
    font-family:sans-serif; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
/* upper strip holding the tabs*/ 
 
ul 
 
{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    position:fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    background-color: #328CC1 
 
} 
 

 
li 
 
{ 
 
    float:left; 
 
    border-right:3px solid #30FFE3; 
 
} 
 

 

 
li a 
 
{ 
 
    display: block; 
 
    color: whitesmoke; 
 
    text-decoration: none; 
 
    padding: 14px 16px; 
 
    text-align: center; 
 

 
} 
 

 
li a:hover:not(.active) 
 
{ 
 
    background-color: #111; 
 
} 
 

 
a.active 
 
{ 
 
    background-color: #EAB126 
 

 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#academics">Academics</a></li> 
 
    <li><a href="#athletics">Athletics</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
</ul>

來源

2017-05-18 Discus

您還可以使用jQuery突出顯示菜單：[demo]（https://jsfiddle.net/xLo71Lk3/） –

更改此：

a.active 
    background-color: #EAB126 
}

這樣：

li a:focus { 
    background-color: #EAB126 
}

Here is the JSFiddle demo

ŧ他做你的問題，但如果這是一個導航欄，然後記住，控制將失去焦點，只要你改變頁面。如果你使用Javascript/JQuery來更容易處理，那會更好。

來源

2017-05-18 06:50:15

處理此問題的典型方法是讓每個頁面都有一個包含頁面名稱的類：例如<div class="academics">。

現在修改你的頭（網頁專區內）如下：

 <ul> 
      <li><a class="for_home" href="#home">Home</a></li> 
      <li><a class="for_academics" href="#academics">Academics</a></li> 
      <li><a class="for_athletics" href="#athletics">Athletics</a></li> 
      <li><a class="forcontact" href="#contact">Contact</a></li> 
     </ul>

這將是其次是CSS如下：

.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact { 
    background-color: #EAB126; 
}

那麼對於當前頁的菜單項突出顯示。

恭喜您的第一個網站！

來源

2017-05-18 07:20:29 WahhabB

點擊導航欄上的顏色改變顏色

回答

相關問題