We Keep Coding

How to keep the active state of a link when the new page is loaded

I am developing a website using Bootstrap.
I have a section with three buttons, each one of them leading to a different page of my website.
<div class="container-fluid filter-tag py-3">
<ul class="tag-menu">
<li> Biella </li>
<li> Vercelli </li>
<li> Valsesia </li>
</ul>
</div>
I've set the css active class so that, when a button (link) is clicked the background-color and color change, in order to let the user know which section of my website is currently on.
.tag-menu li a{
border:1px solid $primary;
border-radius:12px;
padding:5px;
margin-right:7px;
color:#000000;
}
.tag-menu li a:active{
border:1px solid $primary;
background-color:$primary;
border-radius:12px;
padding:5px;
margin-right:7px;
color:#ffffff;
box-shadow:none;
}
I can see, through the inspector, that the active class is set correctly, but when I click on one of the buttons, I see that the active class appears for just one second and then, when the new page is loaded, the button hasn't kept its active class.
I'm aware of the fact that Stack is full of questions similar to mine and that I should probably use JQuery/JavaScript, but none of the solutions I've tried so far worked for me.
Could you please help me solving the problem?
Thank you very much!

:active is not a class, but a selector that catch the clicking moment (between the click and the release), so your CSS is added only for that instant. Here a small example:
a:active{
color:red;
}
<a>link example</a>
In order to achieve what you wanted to do, you should use an event listener to add the class when the link is clicked:
var links = document.querySelectorAll(".link");
for(link of links){
link.addEventListener("click", function(e){
for(inlink of links){
inlink.classList.remove("active");
}
e.target.classList.add("active");
});
}
.active {
color:red;
}
<a class="link">link 1</a><br>
<a class="link">link 2</a>

Why isnt this clickable drop down menu showing?

I have a drop down menu that when hovered over works and I added a some javascript that toggles a css class .show-menu on and off when click and removes the hover css for mobile devices. My problem is the menu isn't showing when clicked. I can see in the dev tools that the css class is being removed and added, so the javascript is working fine., so it seems to be a css issue. however I'm failing to see any css conflicts that would be causing this issue. Does anyone have any idea what the issue is here?-thanks
I added the entire css sheet in the jsfiddle as I'm clearly missing something
https://jsfiddle.net/kmut5xtu/
<nav>
<ul class="main-nav">
<li class="main-nav-item current-page">Home</li>
<li class="main-nav-item">About
</li>
<li class="main-nav-item characters">
<span>Characters</span>
<ul class="drop-menu">
<li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item">Author</li>
</ul>
</nav>
!function app(){
!function AddMenuClickHandler(){
let charTab= document.querySelector(".characters");
let toggle= 1;
charTab.addEventListener("click",function(){
let dropMenu=document.querySelector(".drop-menu");
if(toggle===1){
dropMenu.classList.add("show-menu");
toggle=0;
}
else if(toggle===0){
dropMenu.classList.remove("show-menu");
toggle=1;
}
})
}()
}()

The css below is the issue:
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
Remove hover from these css and you will be good.

Off the bat, you need to tell your HTML that you are using JS. You do this with script tags:
<script>
Your code here
</script>
While I don't personally use JS to disable clickable menus on phones, there is a really simple way to just make them clickable that BootStrap uses, which, if you use BootStrap, will allow you to easily modify things for mobile views.

Page jumps on checkbox click even with javascript disabled

A while ago you guys helped me with a page jump issue on this page in this forum post. I will be referring to the styled checkboxes under "Clients." Well a while back I just set the min-height on the changing container and it then prevented the page jump, but no longer does (for an unknown reason). Well, I went ahead and put window.scrollTo(0,1400) in my function, but it doesn't center the styled checkboxes correctly on IE so now I'm back to trying to figure out why the page jumps.
The weirdest thing though.. the page jumps when clicking one of the styled checkboxes even if you disable javascript (in chrome developer tool settings and then refresh). Why would a checkbox with javascript turned off cause a page jump?

I had a quick look on your source code I couldn't figure out why do you pull data using json on each click? does the clients change LIVE?
What i mean is you can list all your clients without Using Get Json or any kind of live query and then add a class for their related respective verticals.
For example for Services and healthcare,
css
#verticals li{
float:left;
list-style:none;
background-color: #97ceff;
color: black;
border-radius:2px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
}
#verticals li.activevertical{
background-color: #2f7fc7;
color: #fff;
}
html output
<!-- list verticals options !-->
<ul id="verticals">
<li id="service">Services</li>
<li id="healthcare">Healthcare</li>
</ul>
<div style="clear:both"></div>
<ul id="customers" class="">
<!-- Add filter class here in the <li> add filter_ before vertical kind !-->
<li class="filter_service">Ecova</li>
<li class="filter_service">HP</li>
<li class="filter_service">Gartner</li>
<li class="filter_healthcare">Henry Schein</li>
<li class="filter_healthcare">GE Healthcare</li>
<li class="filter_healthcare">BerylHealth</li>
<!-- and if a vertical can be in two categories add both vertical classes !-->
<li class="filter_healthcare filter_service">BerylHealth Show in Service and Healthcare</li>
</ul>
jQuery : very short version
jQuery(document).ready(function($){
$("#verticals li").on('click', function(){
var filterli = ".filter_"+$(this).attr("id");
$("#customers li").hide();
$("#verticals li").removeClass('activevertical');
$(this).addClass('activevertical');
$(filterli).show();
});
});
check it out at JSFiddle

use CSS to change a horizontal menu to be a responsive menu for mobile devices

I have this HTML for me horizontal CSS menu:
<div id="cssmenu">
<ul>
<li><span>Homepage</span></li>
<li><span>Services</span>
<ul>
<li><span>LINK</span></li>
</ul>
</li>
<li><span>Projects</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>
Whats the best way to use css to make it a dropdown menu (like: http://responsive-nav.com/) when the page gets smaller.
i have made this menu dissapear when the page gets too small using media queries but i would like to just use CSS to change it to be like the menu (link above) and keep the same HTML.
here is a fiddle with the full code: http://jsfiddle.net/auBpX/

Your media queries should override the default styles so put them at the bottom of your css rather than the top.
I'm not going to code the whole thing but this fiddle might get you started.
#media screen and (max-width: 520px) {
#cssmenu {height:10px; overflow:hidden;}
#cssmenu:hover {height:auto; overflow:none;}
#cssmenu li {display:block; width:100%; float:none;}
...
}

(html/css/javascript) Trying to make my Current Page link in the navbar a different color

I've been reading around and people recommending only CSS to change the current page navbar link background color but I don't get how that's possible since CSS is static and I won't be able to add/remove the .currentlink class on the links? So right now I'm using JS / jquery to try to add / remove class based on click, but the site refreshes and nothing is saved when I click, so that the class that I added/removed doesn't do anything. May someone guide me the right direction? Example: I click on the last link of the HTML I gave you, but it would just go to that site and since everything refreshes to a new site, the background doesn't change.
HTML
<nav class="clearfix">
home
about us
tour
flickr search
<div class="rightnav">
Sign Up
Log In
</div>
</nav>
CSS
.greybackground {
background: #E6E6E6;
}
JS
$('nav a').on('click', function(){
$('nav a').removeClass('greybackground');
$(this).addClass('greybackground');
});

If you are creating multi page website and want to change link color on each page, simply create a class with specific css properties and add this class to respective navbar link on each page. Make sure that on any page, class must be added to only respective page link.
Any if you are looking solution for single page website following code will work just fine
Here is html css code for simple navigation bar
<h1>navbar</h1>
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
<button>Log in</button>
</ul>
a{
background-color:black;
padding:10px;
text-decoration:none;
color:white;
}
li{
margin:30px;
display:inline;
}
ul{
list-style-type: none;
}
.transform{
background-color:red;
}
button{
background-color:green;
padding:10px;
color:white;
}
This is javascript to change bg color of active link
$("a.link").click(function(){
$("a.link").css("background-color", "black");
$(this).css("background-color", "red");
});
Simply add class '.link' for every navbar link and when user clicks on any navbar link css property ad applied to that link and all other links will change their bg color to none. I hope it helps
https://codepen.io/pranjalkoshti/pen/GMarvj

The easiest way to achieve this is identify an element that
Is present on every page
You can add markup to
For example, a div for your overall content.
If you add the following to the div :
<div id="content" data-currentpage="about">
This will identify the page uniquely.
and for each menu item add a class that matches:
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
So, on page ready ( jQuery(document).ready(function(){...) run the following code:
// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');
This will 'match' each page (via the data-currentpage tag) to the corresponding menu item and add your background class to that menu item.

Solution in vanilla JS (HTML, CSS).
Navbar items need to be in class .navlinks
Add styling under the class current-link.
<html>
<nav>
<ul>
<li class="navlinks"></li>
<li class="navlinks"></li>
</ul>
</nav>
</html>
<style>
.current-link {
background-color: red;
}
</style>
<script>
let links = document.getElementsByClassName("navlinks");
for(let i = 0;i < links.length;i++){
if (links[i].href.replace(/\/$/, '') == ocument.URL.replace(/\/$/, '')){
links[i].classList.add("current-link");
}
}
</script>