一旦按钮内的链接也处于活动状态，则将导航栏下拉按钮设置为活动状态（更改颜色）

Question

So I have been trying to set a Navbar dropdown button active (Change color) once a link inside the button is also active, cant seem to work out how, new to html

I have set up the navbar on the top of the page with some links inside aswell as a few drop buttons. i have posted a sample of the HTML code along with the CSS.

 .navbar a.active { color: red; }.navbar { overflow: hidden; background-color: #325d81; padding: 0px; }.navbar a { float: left; font-size: 21px; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 21px; border: none; outline: none; color: white; padding: 14px 30px; background-color: inherit; font-family: inherit; margin: 0; cursor: pointer; }.navbar a:hover:not(.active), .dropdown-content a:hover:not(.active), .dropbtn { color: #B0B0B0; cursor: pointer; }.dropdown-content { display: none; position: absolute; color: #f2f2f2; background-color: ; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; padding: 12px 16px; text-decoration: none; display: block; text-align: left; background-color: #4078a5; }.dropdown-content a:hover:not(.active) { color: #B0B0B0; }.dropdown:hover.dropdown-content { display: block; }

 <div class="navbar"> <div class="dropdown"> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Dropdown <i class="fa fa-caret-down"></i> </button>` </ul>` <div class="dropdown-content" id="myDropdown"> <a class="active" href="Stats.html">Stats</a> <a href="Images.html">Images</a> <a href="Document.html">Document</a> </div> </div> </div>

any help would be super. i have tried looking it up.

Answer 1

This code is for Stats.html similarly change the class name to "active" in other html files

<a class="active" href="Stats.html">Stats</a>
<a href="Images.html">Images</a>
<a href="Document.html">Document</a>

This is for Images.html

<a href="Stats.html">Stats</a>
<a class="active" href="Images.html">Images</a>
<a href="Document.html">Document</a>

And this is for Document.html

<a href="Stats.html">Stats</a>
<a href="Images.html">Images</a>
<a class="active" href="Document.html">Document</a>

If you do so, then clicking the button will take you to that page and also makes that button red. You can use same css

Answer 2

The way is to create separate classes for each button. This code works fine but the dropdown becomes horizontal.

 .navbar a.active { color: red; }.navbar { overflow: hidden; background-color: #325d81; padding: 0px; }.navbar a { float: left; font-size: 21px; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 21px; border: none; outline: none; color: white; padding: 14px 30px; background-color: inherit; font-family: inherit; margin: 0; cursor: pointer; }.navbar a:hover:not(.active), .dropdown-content a:hover:not(.active), .dropbtn { color: #B0B0B0; cursor: pointer; }.dropdown-content { display: none; position: absolute; color: #f2f2f2; background-color: ; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.inactive1 { float: none; padding: 12px 16px; text-decoration: none; display: block; text-align: left; background-color: #4078a5; }.inactive2 { float: none; padding: 12px 16px; text-decoration: none; display: block; text-align: left; background-color: #4078a5; }.dropdown-content a:hover:not(.active) { color: #B0B0B0; }.active { background-color: #325d81; }.dropdown:hover.dropdown-content { display: block; }

 <div class="navbar"> <div class="dropdown"> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Dropdown <i class="fa fa-caret-down"></i> </button>` </ul>` <div class="dropdown-content" id="myDropdown"> <a class="active" href="Stats.html">Stats</a> <a class="inactive1" href="Images.html">Images</a> <a class="inactive2" href="Document.html">Document</a> </div> </div> </div>