I'm a new learner on PHP. I can't solve any problem on my code.
In sidebar.php
<nav class="side-bar">
<ul>
<li>
<a href="index.php" class="category active">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="category">
<i class="fi fi-bs-apps"></i>
<span>Room</span>
</a>
</li>
<li>
<a href="contact.php" class="category">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
In script.js
const category = document.querySelectorAll('.category');
category.forEach(cate =>{
cate.addEventListener('click',()=>{
removeClass();
cate.classList.add('active');
})
})
function removeClass(){
category.forEach(cate=>{
cate.classList.remove('active');
})
}
In index.php
#code
<?php include ("sidebar.php"); ?>
#code
but the active class is not highlighted when I link to a new page, but it works if I use href="#" in tag. How can I solve this problem?
You need to define the colors you want to use when an item is active and when an item is visited, but not active. You may choose the colors you prefer instead of the ones I have chosen.
const category = document.querySelectorAll('.category');
category.forEach(cate =>{
cate.addEventListener('click',()=>{
removeClass();
cate.classList.add('active');
})
})
function removeClass(){
category.forEach(cate=>{
cate.classList.remove('active');
})
}a.active {
color: #7F7FEE;
}
a, a:not(.active):visited {
color: #0000FF;
}<nav class="side-bar">
<ul>
<li>
<a href="index.php" class="category active">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="category">
<i class="fi fi-bs-apps"></i>
<span>Room</span>
</a>
</li>
<li>
<a href="contact.php" class="category">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
</li>
</ul>
</nav>