javascript 與 css 的onclick事件問題

css javascript 菜鳥前端

alanotmt 2023-01-12 18:04:57 ‧ 927 瀏覽

分享至

先附上codepen:https://codepen.io/alanotmt/pen/PoRQpKB

功能點擊<a>會透過javascript加入active的css 來改變背景顏色
問題:
我有多個不同主題的nav css，但css那邊一改就是全部都改，只能增加class來區分，
我就嘗試把nav的地方

nav ul li{
  list-style:none;
  float:left;
  padding-right:20px;
}
nav ul li a{
  text-decoration:none;
  color:#222;
  background-color:#ccc;
  padding:4px 5px;
}

改成這樣，active 就沒用，改不了背景顏色。

.navecation ul li{
  list-style:none;
  float:left;
  padding-right:20px;
}
.navecation ul li a{
  text-decoration:none;
  color:#222;
  background-color:#ccc;
  padding:4px 5px;
}

請問原因是什麼，該如何處理這種多class 裡的子元素的問題?
對前端還是在非常菜鳥的階段，如問到一些白痴問題，請見諒。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

iT邦新手 2 級 ‧ 2023-01-12 18:17:30

最佳解答

.active{
  background-color:#d90000;
  color:#fff;
}

改成

.navecation ul li a.active{
  background-color:#d90000;
  color:#fff;
}

就可以了
至於為什麼，這裡寫的蠻詳細的，可以參考看看。

回應 1
分享
檢舉

alanotmt iT邦新手 4 級 ‧ 2023-01-13 10:06:29 檢舉

這篇文章寫得很簡單明瞭~謝謝你

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

javascript 與 css 的onclick事件問題

1 個回答

我要發表回答

標記使用者