jQuery set class active with anchor - javascript

I have a menu like :
<ul>
<li>
<a class="scroll-to" href="#one">one</a>
</li>
<li>
<a class="scroll-to" href="#two">two</a>
</li>
<li>
<a class="scroll-to" href="#three">three</a>
</li>
</ul>
And on my page, multiple anchor like :
<a id="two" target="_blank"></a>
or
<a id="one" target="_blank"></a>
I'm looking for a way to set an active class to my menu when i scroll to an anchor (with click or mouse scroll).
For example if i scroll to my anchor id="two" i need to set active my li #two.
Any ideas ?

If I understand your problem, add your anchors some class, for example section and try this:
$('.section').hover(function() {
var anchor = $(this).attr('id');
$('a[href="#'+anchor+'"]').addClass('active');
}, function() {
$('a').removeClass('active');
});
http://codepen.io/tomekbuszewski/pen/MwMWoK

var links = document.querySelectorAll("a.scroll-to");
console.log(links[1]);
for (var i = links.length -1; i>=0; i--)
{
//click event
links[i].onclick= someHandlerFunction;
//hover event
links[i].onmouseover= someHandlerFunction;
}
var liActive = undefined;
function someHandlerFunction(event) {
if (liActive != undefined) liActive.setAttribute("class", "");
liActive = event.target.parentNode;
liActive.setAttribute("class", "active");
return false;
}
.menu{
background-color: #00ff00;
}
.menu li.active{
background-color: blue;
}
<ul class="menu">
<li>
<a class="scroll-to" href="#one">one</a>
</li>
<li>
<a class="scroll-to" href="#two">two</a>
</li>
<li>
<a class="scroll-to" href="#three">three</a>
</li>
</ul>
Voila (add and remove class in the same time), it's a but it's a bit redundant to add active class at click and hover.

Related

I want to make a parent nav link sidebar active when its child is active (current page)

Here's my code:
I want it in a way that when i click on a child link, it becomes active and the parent link is active too. I utilize the css class .active for my active classes for both the main and sub-menu.
The below JS snippet works but only for the menus without sub-menus
$(document).ready(function($) {
var url = window.location.href;
var activePage = url;
$('.menu li a').each(function() {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="">
<a href="index.php">
<i class="material-icons">home</i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="sell.php">
<i class="material-icons">receipt</i>
<span>Sell</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">show_chart</i>
<span>Reporting</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">apps</i>
<span>Products</span>
</a>
<ul class="ml-menu">
<li>
Add Product
</li>
<li>
All Products
</li>
<li>
Add Category
</li>
<li>
All Categories
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->
Implement an on mousedown event listener for your anchor tags, passing in the id for each anchor tag and use the parentElement property to get the element's parent.
document.getElementById("myLI").parentElement.nodeName;
you can try this JS code:
$(document).ready(function () {
$('a').click(function () {
//removing the previous selected menu state
$('.menu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
And the css for Active link:
.active > a {
color:red;
}
hope it helps...

Active state will not stay after refresh

I need to add active class to the links and change active state while navigating page. I have tried with this but changes not applying after switching between links. (not working after page reload)
Here is my code
$('#shortcuts-main > li').click(function (e) {
$(".shortcut-link-active").removeClass("shortcut-link-active");
$(this).addClass("shortcut-link-active");
});
a{
color:black;
padding-bottom:15px;
display:block;
}
.shortcut-link-active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shortcuts-main">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Any ideas?
Modification done to the DOM will not persist after the page is refreshed. A solution for this is to save the data on the client and then read after reloading.
Unfortunately localstorage won't work on Stackoverflow, but at least you can see some code:
$('#shortcuts-main > li').click(function(e) {
$(".shortcut-link-active").removeClass("shortcut-link-active");
$(this).addClass("shortcut-link-active");
console.log('id:', $(e.target).data('id'))
localStorage.setItem('shortcut-link-active', $(e.target).data('id'));
});
const lastActiveLink = localStorage.getItem('shortcut-link-active');
if (lastActiveLink) {
$('#shortcuts-main')
.find(`[data-id='${lastActiveLink}']`)
.parent()
.addClass('shortcut-link-active')
}
a {
color: black;
padding-bottom: 15px;
display: block;
}
.shortcut-link-active a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shortcuts-main">
<li>
<a data-id="link-id-1" href="#">Link 1</a>
</li>
<li>
<a data-id="link-id-2" href="#">Link 2</a>
</li>
<li>
<a data-id="link-id-3" href="#">Link 3</a>
</li>
<li>
<a data-id="link-id-4" href="#">Link 4</a>
</li>
</ul>

Active one main menu at a time hide others

please take a look at the image, here I am tried to do
If I click on "Fan Panels" The other two menus will be visible. Which is currently working fine. and here three menus will be visible.
If I click on "Entertain Art" menu the "Score Art" and "Fan Panels" need to be hidden, but the "Entertain Art" still need to show.
If I click on "Score Art" the "Fan Panels" and "Entertain Art" menu need to hidden, but the "Score Art" still need to show.
If you think about the code here it is :
{{#each categories}}
<li class="nav-list__item">
<a class="nav-list__item-link" href="{{url}}" title="{{name}}">{{name}}</a>
</li>
{/each}}
The website is under preview mode
Tts Big-commerce so menu displaying frontend with the dynamic syntax I think we can do it with javascript and jquery to find text and hide them what you suggest?
FOR EXAMPLE CODE:
<ul id="primeNav" class="nav-list nav-list--prime">
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Fan Panels">Fan Panels</a>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Entertain Art">Entertain Art</a>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Score Art">Score Art</a>
</ul>
Thanks in Advance
You can try this code alternatively -
Edit 3 -
Here's the newly updated code
/* Conditional Page Options */
var url = window.location.href;
var url = url.replace(/\//g, '');
var sub_url = location.protocol + location.host;
var page = url.replace(sub_url, '');
/* conditional click actions */
if (page == "entertain-art") {
$("#primeNav .nav-list__item").hide();
$("#primeNav .nav-list__item:nth-child(2)").show(); // revised
} else if (page == "score-art") {
$("#primeNav .nav-list__item").hide();
$("#primeNav .nav-list__item:nth-child(3)").show(); // revised
} else {
$("#primeNav .nav-list__item-link").on('click', function() {
var index = $(".nav-list__item-link").index(this);
if (index == 0) {
$("#primeNav .nav-list__item").show();
} else {
$("#primeNav .nav-list__item").hide();
$(this).parent().show();
}
});
}
$("#primeNav .nav-list__item:nth-child(4)").show(); // revised
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primeNav" class="nav-list nav-list--prime">
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Fan Panels">Fan Panels</a>
</li>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Entertain Art">Entertain Art</a>
</li>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Score Art">Score Art</a>
</li>
</ul>
try it.
**UPDATE* : without adding new class name
//Without any new class name
$("#primeNav li").click(function(){
if($(this).text().trim()!="Fan Panels") //For Point 1, if click on FanPanel then show all
{
$("#primeNav li").hide(); // hide all item
$(this).show(); // Show item which is clicked
}
})
//Added **menu** as classname to all anchor tag, also added another unique class name to handle individual.
//Older try
$(".menu2").click(function(){
console.log($(this).text());
if($(this).hasClass("menuFan")==false) //For Point 1, if click on FanPanel then show all
{
$(".menu").hide(); // hide all item
$(this).show(); // Show item which is clicked
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primeNav" class="nav-list nav-list--prime">
<li class="nav-list__item">
<a class="nav-list__item-link menu menuFan" href="#" title="Fan Panels">Fan Panels</a>
<li class="nav-list__item">
<a class="nav-list__item-link menu menuEnt" href="#" title="Entertain Art">Entertain Art</a>
<li class="nav-list__item">
<a class="nav-list__item-link menu menuScore" href="#" title="Score Art">Score Art</a>
</ul>

How to change colour of an element nested in other elements using javascript

I have a list structured as such:
<ul class="list">
<li class="list-element ">
<a href="#"><a>
</li>
</ul>
<button onclick="changeColour()"></button>
<script src="js/index.js"></script>
The css for my links are:
ul li a {
color: red
{
How do I change the colour of my links?? I know you can do this:
function changeColour() {
var div = document.getElementsByTagName("ul");
div.style.changeColour = "rgb(0, 212, 177)";
}
but I don't know how to the links within list item within the list.
Try document.querySelectorAll:
let links = document.querySelectorAll("ul.list li.list-element a");
for (let link of links) {
link.style.color = "rgb(0, 212, 177)";
}
ul li a {
color: red
{
<ul class="list">
<li class="list-element">
LINK 1
</li>
<li class="list-element">
LINK 2
</li>
</ul>
You can change it with css. Your css is correct but you missed ; after red. And you can do it with javascript too or you can use both if you want to give it a color then change it at run time. For your javascript code you forgot to add the collection's index...
document.getElementsByTagName('a')[0].style.color='orange';
NB: I'm targeting the first anchor with [0]. To target all anchors loop through the collection.
Like this
function changeColour() {
var div = document.getElementsByTagName("a");
for(var i = 0; i < div.length; i++){
div[i].style.color = "rgb(111, 112, 112)";
}
}
changeColour();
ul li a {
color: red;
{
<ul class="list">
<li class="list-element ">
<a href="#">link 1<a>
</li>
<li class="list-element ">
<a href="#">link 2<a>
</li>
</ul>
HTML
<ul class="list">
<li class="list-element ">
<a href="#">link 1<a>
</li>
<li class="list-element ">
<a href="#">link 2<a>
</li>
</ul>
Script
$('.list').each(function(){
$(this).find('li a').css('color','rgb(111, 112, 112)');
});
Below is Jquery model in case you are looking for it
// Jquery model if you want to use
$(document).ready(function(){
$('#change').click(function(){
var color=["blue","red","yellow","black","pink","green"];
var prompts = prompt("please type your valid color");
// checking if entered colored is registered
for(x in color){
if(color[x] ==prompts){
//registered then set its value as color
$("a").css({"color":prompts});
return ;
}
}
// deal with unregistered color
var conf = confirm('not registered color entered , do you want to set the default color?');
if(conf ==true ){
$("a").css({"color":"black"});
}
});
});
ul li a {
color: red;
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li class="list-element ">
link 1
</li>
<li class="list-element ">
link 2
</li>
</ul>
<p id='change'> please click here to change link color </p>

Remove class with Jquery on a different item

I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.
I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.
Here is my HTML code:
<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here
<nav class="main-menu">
<ul>
<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>
<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>
Here is the script I'm using to toggle the menu
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Here is the code for the remove/add class for animating the button.
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.
to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links
If you are using jquery anyways, then use this for the class toggling logic
$(".main-menu ul li a").click( function(){
e.preventDefault();
$(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});

Categories