Set active link (without ul list) - javascript

I´m searching about this but only find ul list based solutions.
I have this code:
<div class='nav'>
<a class='nav-link nav-01' id="tab01" href='#scene-1'></a>
<a class='nav-link nav-02' id="tab02" href='#scene-2'></a>
<a class='nav-link nav-03' id="tab03" href='#scene-3'></a>
<a class='nav-link nav-04' id="tab04" href='#scene-4'></a>
</div>
I would like to change class (for example "nav-01" to "nav-01-on") when click on it. Also, each link have an active class style different (nav-01-on for nav-01, nav-02-on for nav-02...).
Any suggestions? Thanks in advance ;-)

Also, each link have an active class style different (nav-01-on for nav-01, nav-02-on for nav-02...).
Since you are working with classes you do not really need to have a different class name to describe the 'active' state of the links. That's the cool thing about CSS classes.
Since your links already have a unique identifier, in the form of the id attribute you have given them, you only need to apply a generic 'active state' class, such as on for example (could be whatever you want). Then in your CSS you could do something like
.on {
/* general rules for elements with the .on class */
}
#tab01.on {
/* specific rules for element #tab01 with the .on class */
}
I would like to change class (for example "nav-01" to "nav-01-on") when click on it.
Since your question is tagged as jquery I will use jQuery, so here's a naive solution of what you want. You can improve on it, I am sure.
//We start assuming we have no active link
var $activeLink = null;
//We apply a listener to every element with the class .nav-link, using jQuery
$('.nav-link').click(function() {
if ($activeLink) {
$activeLink.removeClass('on');
}
//Store the link we clicked on as the active link.
//Notice we are wrapping it with the jQuery function,
//so $activeLink is a jQuery object
$activeLink = $(this);
$activeLink.addClass('on');
});
Here's a fiddle of the above: https://jsfiddle.net/p1tumym9/4/

Working Fiddle to play around with
What you should do to make life a lot easier for yourself is to toggle between a single active class and in your CSS just specify how each of your links will look like when it has the active class, instead of creating a bunch of unique classes (which can get difficult to manage).
How to toggle between the active link:
$('.nav').find('a').click(function(){
// Remove active class from all links
$('.nav').find('a').each(function(){
$(this).removeClass('active');
});
// Add active class to current link
$(this).addClass('active');
});
And in your CSS just specify how each link will look when given the active class:
.nav-01.active {
/* active styles for nav-01 */
}
.nav-02.active {
/* active styles for nav-01 */
}
.nav-03.active {
/* active styles for nav-01 */
}
.nav-04.active {
/* active styles for nav-01 */
}

Related

How to find class name from inspected code

When I inspected my web page I got this code
<li id="SR_R1_tab" class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active" aria-controls="SR_R1" role="tab" aria-selected="true">
It is an oracle apex tabular region's sub region. I want to perform some css modifications and javascript actions in this class(sub regions of tabular region). How to find the exact class from this inspected code?. Should I use the class 't-Tabs-item' or 't-Tabs-item a-Tabs-before a-Tabs-selected is-active' ?
This element has 4 css classes:
t-Tabs-item
a-Tabs-before
a-Tabs-selected
is-active
In the debugger, you need to observe what each class does to your UI and you can decide which class to override.
Example: if you want to change the styling for each element, you will probably have to override t-Tabs-item:
.t-Tabs-item {
background: red;
}
But if you only want to change the appearance of the selected item, then you will probably have to override a-Tabs-selected. In that case you should also add the more generic .t-Tabs-item class in order to avoid side effects.
.t-Tabs-item.a-Tabs-selected {
background: green;
}
The li element you posted has the class attribute:
class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active"
This means it has the following class names:
t-Tabs-item
a-Tabs-before
a-Tabs-selected
is-active
If you want to target only this li, by class name, and considering no other HTML elements have the same exact class t-Tabs-item a-Tabs-before a-Tabs-selected is-active, use this class name for selection:
.t-Tabs-item.a-Tabs-before.a-Tabs-selected.is-active { ... }
If you want to select any element which has the class name t-Tabs-item, use it as a selector, but consider that if other HTML elements in your page have this class, your selection would return multiple elements.
As per #str's comment to your question, if you want to target this specific li element, it's best to use an id selector:
#SR_R1_tab { ... }

Add active state to simple jQuery accordion

I've got this simple accordion jQuery script that's almost there with what I need it for, but I'm struggling with one last thing. The animated bits work fine - i.e. if the corresponding content block is closed, it slides open, and vice versa.
Here's the jQuery code:
$('.accordion-heading').click(function(){
$(this).next().slideToggle(300);
$('.accordion-content').not($(this).next()).slideUp(300);
$('.accordion-heading.active').removeClass('active');
$(this).addClass('active');
});
I want to have an 'active' class on the heading, but I need it to be removed if the same element is clicked twice. At the moment, everything works fine if a non-active heading is clicked. If an already-active heading is clicked again, however, the content block collapses correctly but the heading retains its 'active' class.
All you need to do is remove the .active class from elements that aren't the current element (you can use the same $.not() method you are currently on another element), then $.toggleClass() the .active class on the clicked element.
$('.accordion-heading').click(function(){
$(this).next().slideToggle(300);
$('.accordion-content').not($(this).next()).slideUp(300);
$(this).toggleClass('active');
$('.accordion-heading').not($(this)).removeClass('active');
});
.accordion-content {
display: none;
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
</div>
Instead of Adding the class and removing the class I suggest using .toggleClass() this way if the element has the class it will remove it and if it doesn't it will add it. If you want to have one of the accordions open manually give it the active class, and let your JS do the rest.
You could use 'toggleClass()' but I find its better to be more specific by checking if the item that was clicked has the class active. This way you can branch out and do other functions depending on the state:
$('.accordion-heading').click(function(){
var theHeading = $(this);
var theContent = theHeading.next();
var slideTimer = 300;
if(theHeading.hasClass('active')) {
$('.accordion-heading.active').removeClass('active').next().slideUp(slideTimer);
theContent.slideDown(slideTimer);
$(this).addClass('active');
} else {
theContent.slideUp(slideTimer);
$(this).removeClass('active');
}
});

Swapping CSS with a Click addEventListener in JavaScript

I am having trouble getting a click event to work on a page. I have a Div with an ID of 'icon', and the class of 'lock', and I want to be able to click on this Div's background image to change the class from 'lock' to 'locked'.
Before any confusion happens, I have both classes in my external CSS file, and they add a background image to the Div. Also, I don't want to use JQuery, but addEventListener with a function. so far, this is what my JS looks like:
var elLock = document.getElementById('icon');
function changeLock(){
var imgSwitch = elLock.getAttribute('class');
if(imgSwitch !== 'unlock'){
elLock.className = 'unlock';
}else{
elLock.className('lock');
}
}
elLock.addEventListener('click', changeLock, false);
The desired result is what is in this youtube video: https://www.youtube.com/watch?v=oI2sRCN7CiM
Any help would be greatly appreciated. I would love to learn from mistakes i've made.
I would use the Element.classList property rather than what you're doing here ...
Then you could simply do:
elLock.addEventListener('click', function() {
elLock.classList.toggle('lock') },
false);
and leave unlock as a default class on the element. Every time you click on the element, it will toggle the lock class on-and-off, and you can use the cascading properties of CSS to override the background properties that are on your default unlock class.
Change an element's CSS with Javascript may provide some help, although it does reference to jQuery. Element.className could be what you need, or element.classList.
I'd check if the current class is 'unlock'. If one class is considered a default, the other class can toggle. Using CSS's cascading properties will allow the toggling class to override the default when it is present.
Alternatively you could remove the currently applied class and apply the other.
if (elLock.classList.contains('unlock')) {
elLock.classList.remove('unlock');
elLock.classList.add('lock');
}
else {
elLock.classList.remove('lock');
elLock.classList.add('unlock');
}

add class to li by clicking on a link from nav menu

I'm a newbie so i hope my question will have some logic :)
i wish to add a class "active" to "li" (in this case a portfolio filter item in the page) by clicking on a link from the nav menu.
the "li" is not a part of the nav menu, how do i assign a "li" with a class if the "li" is in the deep tree - it's a whole different part of my site.
the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
<li <--- the place i wish the "active" be added
i have checked other question but couldn't figure out how to implement the specific need.
thanks for the help
You have to create a listener for the link of the menu. In JQuery, to create a listener, you have the 'on' function.
Example :
$("myElement").on("click",function(){});
After that, add an id attribute for the 'li' tag.
For example:
<li id="myLI">
So, when the user will click on the link of the menu, it will go to the listener. And in the listener, you will do :
$("#myLI").addClass("active")
Don't forget to create the css class.
First you have to specify .active in your CSS.
.active {
//add styles here
}
Then using javascript you have to grab #myLI and set class .active to it using onclick event:
var element = document.getElementById("myLI");
element.onclick = function() {
element.setAttribute('class','active');
}

adding and removing the selected class to a parent div

OK so now I have my sliding open ul revealing all the list elements, and now I want the title bar that is clicked on to have a state of selected added to it, and then remove that state when it's closed...
the div above the UL has a class of .regionHeader
here's an example of the mark up
<div class="regionHeader">title of the region</div>
<ul class="region"><li>the region i'm hiding/showing</li></ul>
here's the javascript
var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').each(function(){
$(this).click(function(e){
e.preventDefault();
$(this).parent().next('.region').slideToggle(300);
});
});
}
};
$(stockists.start);
I've been trying addClass but it seems to just add the class and not remove it?
Can you not use toggleClass()
This way the class will be added/removed when you need it to be.
$(this).parent().toggleClass("className");
$(this).parent().next('.region').slideToggle(300);
$(this).parent().toggleClass('activeTitle'); // toggling the class on the parent
$(this).parent().next('.region').slideToggle(300);
to remove a class from an element you have to use removeClass
$(element).removeClass("classname");

Categories