如何将颜色更改为选项卡菜单
[英]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.