iT邦幫忙

0

javascript 與 css 的onclick事件問題

  • 分享至 

  • xImage

先附上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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
F
iT邦新手 2 級 ‧ 2023-01-12 18:17:30
最佳解答
.active{
  background-color:#d90000;
  color:#fff;
}

改成

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

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

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

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

我要發表回答

立即登入回答