We Keep Coding

Target the css class with some JS

Hello I currently have this inline JS on my wordpress navigation menu
login
I was told it is better to use a regular menu item then just give it a class then target the class with some JS. I tried searching for examples but can't find that works for me. Could someone share a sample code to point me in the right direction?
thanks

I think this is what you are told.
var link = document.querySelector(".js-link");
link.addEventListener("click", (e) => {
e.preventDefault();
//do whatever you want hear
console.log("redirect to another page");
});
Google
The way you do will make your code messy, hard to read and maintain. So we should separate html, css and js code. And to make your javascript and style not affect each other when you change your code, you should naming the class which you want to use javascript different with class you want to style.
For example I using class "js-link" just for javascript, not to style it. If I want to style the link I will add another class for it.

Issue with changing class names using javascript/jquery

I'm looking to change the background color of the currently clicked on tab in my navigation menu. Then when I click a different tab, I want the old one to change back to the original background color. I've seen this tons of places, but every tutorial I follow hasn't worked for me.
Here is the html code I have for the navigation. Basically, I want to change the class "member_nav" to "member_nav_clicked" and then back to "member_nav" when a different tab is clicked.
<div class="member_nav">
Nav 1
</div>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
I'm not going to include any of the javascript functions I've tried, since none of it was working.

Add an active class, then on a click event find the currently active element and remove the active class with $('.active').removeClass('active') after this set the active class to the clicked element $(this).addClass('active').
#adeneo's anwser in the comments is actually better.
$(this).addClass('active').siblings().removeClass('active');

To be honest, this is some jQuery 101... i suggest you read up on the basics. I set up a jsFiddle for you, and i hope you wont just copy paste it but also try to learn something from it.
You can find it here: http://jsfiddle.net/wUpYh/1/
The code:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked').addClass('member_nav');
$(this).closest('.member_nav').removeClass('member_nav').addClass('member_nav_clicked');
});
So what happens is, i remove the member_nav class and add the clicked class. The line above it will take care of the previous clicked item. When an element has the active class, it will be removed before asigning it to the new clicked element.
But to be honest, a nicer way of doing this, would be to assign an active class and leave the normal class as it is. Like this:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked');
$(this).closest('.member_nav').addClass('member_nav_clicked');
});

Add child css class to parent css class for drop down

I am trying to add a child css class to a parent css class for a drop down menu. When the user clicks on the parent css class called .linkBox it brings up a drop down list. The child css class that needs to appear is a css generated arrow. I have the arrow centered, but everything I've tried to get the arrow to appear hasn't worked. I have to use both as css classes, they cannot be IDs. The second part of this is that the arrow will only effect the first and third box in the header. The other issue is that the project calls for the use of PrimeFaces and I think that might be part of what is throwing me off. This is what I have so far-
$('.linkBox').hover (function () {
$(this).parent('.linkBox').children('p').addClass("ddArrow");
},function () {
$(this).parent('.linkBox').children('p').removeClass("ddArrow");
}
);
The PrimeFaces code is-
<p:panel id="profileDropDown" styleClass="linkBox profileBox">
Help I've been stuck on this for days!
Thank you!!!!

Script issue on website

When I use dynamic options, the second option looks strange when the script is run.
I've made a fiddle with the problem http://jsfiddle.net/niklasro/GqGGA/ but it won't run the script that should activate the dynamic option:
function cities(obj){
if(obj.value == '3'){
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display='none'
}else{
$('#cities').load('/cities?regionId='+obj.value);
}
}
How can my problem be resolved?

The problem is a pseudo css class that jQuery adds a style called active and then forces it to behave. Because this is the active control it has the active styling. You can see it in your example if you click on the dropdowns.
If you force remove this styling with code like this http://jsfiddle.net/mGAs4/5/ it will go away. You can also add CSS to change what the active class does for this type of element.
Something like
select:active { background:white; }
I think this will also work
select.active { background:white; }
But I have not played around with jQuery's active support much.

Removing CSS class not yielding expected results with javascript

I have a web site that exists on one page: index.html. There is a lot of content on the site (that appears to be on many "pages") but via javascript and CSS, all the info is contained on index.html.
So there exists a "home" position and an "inside" position (like a home page and inside page), and I need some links to behave differently when the user is on an inside page vs the home page. So the way I have it set up, once an "inside" link is clicked, I remove a class from a div that I think should cause the links within that div to behave differently. But they are not behaving as I expect.
The page, very dumbed down for this example, is here:
http://littleduck.com/ns_sample/index.html
On this example, there is just the home page and the "Services" page. You can link back and forth between them.
If you mouseover those grey links on the left (which are called "balloons" in the code), you will see that they have a hover color, and a popup graphic appears. I ONLY want this to happen when the page is in the "home" position. I have a class called "popup_yes" that allows this hover/popup action to happen. It appears when index.html is loaded, and if I remove it or change its name in the code, the hover/popup does not work. So I know that class is doing something. Now, I REMOVE that class when "Services" is clicked. I can see by inspecting the element in Chrome that "popup_yes" DOES in fact get removed. HOWEVER ... the hover/popup action still happens when you mouseover the balloons.
And when I inspect the element, even though you can see in the code that "popup_yes" is gone, it is still being utilized by Chrome. Here is a screenshot of what Inspect Element looks like on the "home" and "inside" pages:
http://i.stack.imgur.com/p1ZP7.jpg
So, please tell me where my brain is derailing. How can I get the hover/popup action to NOT WORK when I'm on the "Services" page? Thank you incredibly much for any help you can provide.

The issue is in your mouseover/out code
$(".popup_yes .balloon_1").mouseover(function() {
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
});
When the page loads, the mouseover event is binding to that span, so that action is already established, if you add the check in the function
$(".popup_yes .balloon_1").mouseover(function() {
if ($('#balloons').hasClass('popup_yes') ){ //<--here
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
it should work as expected

I have modified the javascript that you are using and could make it work. Here are the changes that i made.
First of all when u removed the class when the services page is clicked I specified the class to be removed.
$('#balloons').removeClass("popup_yes");
After this when you click back the Home page the class has to be added back so i included this line after you animate the $('#buttons') div.
$("#balloons").addClass("popup_yes");
Now comes the changing of the hover effect on each of the balloons. I'll show the change I did to the first balloon element you can reproduce the same for the others.
$(".balloon_1").mouseover(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
$(".balloon_1").mouseout(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").hide(400);
$(".balloon_1").removeClass("hover");
}
});
What I modified is instead of checking for both the class for hovering I just checked the balloon_1 class and then I made the effect only if the closest element to it with an id balloons has the class popup_yes.
I tried it in chrome. Hope it works well in other browsers as well.