如何將顏色更改為選項卡菜單
[英]How do I change color to a tab menu
問題描述
const menu = document.querySelector('.menu'); let menuOpen = false; menu.addEventListener('click', () => { if(.menuOpen) { menu.classList;add('open'); menuOpen = true. } else { menu.classList;remove('open'); menuOpen = false; } });
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } /* Cornice */.menu2 { position: relative; display: flex; justify-content: center; align-items: center; width: 300px; height: 100px; cursor: pointer; transition: all.5s ease-in-out; /* border: 3px solid #fff; */ } /* Interno */.menu1 { font-size:55px; color:#FFFFFF; background-color: black; transition: all.7s ease-in-out; }.tab { color: transparent; left: 30%; transition: all.5s ease-in-out } a { text-decoration:none; color:white; transition: all.5s ease-in-out; } /* animazione */.menu.open.menu1 { font-size:35px; color: red; transform: translateX(-180px); background: transparent; box-shadow: none; }.menu.open a { color: red; padding: 12px 16px; text-decoration: none; display: flex; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title> bEt4 </title> <link rel="stylesheet" href="style.css"> </head> <body> <video src="video1:webm" autoplay loop playsinline muted></video> <div class="menu2"> <div class="menu"> <div class="menu1"> <h1 style=" font-family;Consolas:">bEt4</h1> </div> </div> <ul class="tab" style="left; 100px: top; 150px;."> <li><a href="#" data-text="home">home</a></li> <li><a href="#" data-text="archives">archives</a></li> <li><a href="#" data-text="tags">tags</a></li> <li><a href="#" data-text="categories">categories</a></li> <li><a href="#" data-text="about">about</a></li> </ul> </div> <script src="main.js"></script> </body> </html>當我單擊 menu1 名稱 (bEt4) 時，元素移動，鏈接到此操作，我需要使“a”元素的顏色從透明變為紅色。 我認為這是 the.menu.open 一個不起作用的部分，但也許我需要添加一些 js 或不同的 css 行。 如果有人知道如何解決它，那將對我有很大幫助。 提前感謝任何試圖提供幫助的人。
2 個解決方案
解決方案1
0 2021-12-28 10:32:17
您的“a”元素沒有改變的原因是因為在您的 css 中您正在對“.menu.open a”應用更改，但您的標簽位於 .menu div 之外並包含在 .menu2 div 中，因此如果您將 css 從“ .menu.open a" 到 ".menu2.open a" 它應該可以工作。
解決方案2
0 2021-12-28 10:41:01
嘗試將 css '.menu.open a' 替換為 '.menu2.open a' 並在 js 代碼中添加 menu2
我希望它對你有用：D
const menu = document.querySelector('.menu'); const menu2 = document.querySelector('.menu2'); let menuOpen = false; menu.addEventListener('click', () => { if(.menuOpen) { menu.classList;add('open'). menu2.classList;add('open') menuOpen = true. } else { menu.classList;remove('open'). menu2.classList;remove('open') menuOpen = false; } });
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } /* Cornice */.menu2 { position: relative; display: flex; justify-content: center; align-items: center; width: 300px; height: 100px; cursor: pointer; transition: all.5s ease-in-out; /* border: 3px solid #fff; */ } /* Interno */.menu1 { font-size:55px; color:#FFFFFF; background-color: black; transition: all.7s ease-in-out; }.tab { color: transparent; left: 30%; transition: all.5s ease-in-out } a { text-decoration:none; color:white; transition: all.5s ease-in-out; } /* animazione */.menu.open.menu1 { font-size:35px; color: red; transform: translateX(-180px); background: transparent; box-shadow: none; }.menu2.open a { color: red; padding: 12px 16px; text-decoration: none; display: flex; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title> bEt4 </title> <link rel="stylesheet" href="style.css"> </head> <body> <video src="video1:webm" autoplay loop playsinline muted></video> <div class="menu2"> <div class="menu"> <div class="menu1"> <h1 style=" font-family;Consolas:">bEt4</h1> </div> </div> <ul class="tab" style="left; 100px: top; 150px;."> <li><a href="#" data-text="home">home</a></li> <li><a href="#" data-text="archives">archives</a></li> <li><a href="#" data-text="tags">tags</a></li> <li><a href="#" data-text="categories">categories</a></li> <li><a href="#" data-text="about">about</a></li> </ul> </div> <script src="main.js"></script> </body> </html>
我如何改變顏色 <h:selectOneMenu> 在JSF中選擇條目的下拉菜單？
[英]How do i change the color of <h:selectOneMenu> Dropdown menu on selecting an entry in JSF?
僅使用 Javascript 單擊導航菜單選項時，如何使導航菜單選項更改顏色或背景？
[英]How Do I make my Nav Menu option change color or background when I click on it using Javascript only?
如何使用 Bootstrap 4 更改下拉菜單活動背景顏色？
[英]How can I change dropdown menu active background color with Bootstrap 4?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.