From this method I could implement a hover that change the color when mouse over at some tab. But I need to change the color permanently when someone clicked tab.
Ex: If someone clicked Page 1, the tab should change color, if someone clicked page 2 then the tab should change color and page 1 tab should change to the color it was..
Can someone suggest a method to implement this?
.wrapper { display: flex; position: relative; display: flex; width: 100%; height: 100% } .wrapper .sidebar { width: 220px; height: 100%; background: #4b4276; padding: 30px 0px; position: fixed; font-size: 15px; display: block; height: 100%; flex-shrink: 0; } .wrapper .sidebar h2 { color: #fff; text-transform: uppercase; text-align: center; margin-bottom: 30px; font-family: Helvetica; } .wrapper .sidebar ul li { padding: 15px; border-bottom: 1px solid #bdb8d7; border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.05); } .wrapper .sidebar ul li a { color: #bdb8d7; display: block; } .wrapper .sidebar ul li a .fas { width: 25px; } .wrapper .sidebar ul li:hover { background-color: #594f8d; } .wrapper .sidebar ul li:hover a { color: #fff; } .wrapper .main_content { margin-left: 220px; width: calc(100% - 200px); display: block; }
<div class="wrapper"> <div class="sidebar"> <h2 style="font-family: Verdana;"> Dashboard</h2> <ul> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="page1.php"><i class="fa fa-paper-plane"></i> Page 1</a></li> <li><a href="page2.php"><i class="fa fa-mobile"></i> Page 2</a></li> <li><a href="page3.php"><i class="fa fa-phone"></i>Page 3</a></li> <li><a href="page4.php"><i class="fa fa-plug"></i> Page 4</a></li> <li><a href="page5.php"><i class="fa fa-user"></i> Page 5</a></li>> </ul> </div> </div>
Thank in Advance!
Advertisement
Answer
This should be done on the backend but incase you don’t want to alter your markup or simply wants a lazy approach, you can try something like this.
- Get the current page using
window.location.pathname
- Select the
li a
element with thehref
value from point 1 above - Add a class like
active
to the matched element
let currentPage = window.location.pathname === '/' ? '/' : window.location.pathname.substring(1) let pageLink = document.querySelector('.sidebar>ul>li>a[href="'+currentPage+'"]'); if(pageLink) pageLink.parentElement.classList.add('active')
.wrapper{ display: flex; position: relative; display: flex; width: 100%; height: 100% } .wrapper .sidebar{ width: 220px; height: 100%; background: #4b4276; padding: 30px 0px; position: fixed; font-size: 15px; display: block; height: 100%; flex-shrink: 0; } .wrapper .sidebar h2{ color: #fff; text-transform: uppercase; text-align: center; margin-bottom: 30px; font-family: Helvetica; } .wrapper .sidebar ul li{ padding: 15px; border-bottom: 1px solid #bdb8d7; border-bottom: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(255,255,255,0.05); } .wrapper .sidebar ul li a{ color: #bdb8d7; display: block; } .wrapper .sidebar ul li a .fas{ width: 25px; } .wrapper .sidebar ul li:hover{ background-color: #594f8d; } .wrapper .sidebar ul li:hover a{ color: #fff; } .wrapper .main_content{ margin-left: 220px; width: calc(100% - 200px); display: block ; } .wrapper .sidebar ul li.active { background-color: red; }
<div class="wrapper"> <div class="sidebar"> <h2 style="font-family: Verdana;"> Dashboard</h2> <ul> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="page1.php"><i class="fa fa-paper-plane"></i> Page 1</a></li> <li><a href="page2.php"><i class="fa fa-mobile"></i> Page 2</a></li> <li><a href="page3.php"><i class="fa fa-phone"></i>Page 3</a></li> <li><a href="page4.php"><i class="fa fa-plug"></i> Page 4</a></li> <li><a href="page5.php"><i class="fa fa-user"></i> Page 5</a></li> </ul> </div> </div>