How to change the selected tab color when clicked in HTML

Question

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!

Answer 1

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 the href 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>