Develop Reference

How do I remove the class from the navbar button when a new link is selected [Javascript]

I am trying to make an active state on my link when clicked, which remains until another link is clicked. I'd like to have the class removed and transferred to the next link when clicked.
Currently it can be toggled on and off on each link.
// navbar toggle for active state
document.getElementById('navbar__list').addEventListener("click", function(event){
event.target.classList.toggle('funcElemStyle');
});
.funcElemStyle {
background: #333;
}

Instead of using javascript to achive this functionality, you can use CSS to achieve the same effect by using :active.
for example:
/* Selects the link element. */
a:active {
color: #4444AA;
}
you can also use :hover if you want effects when hovered. CSS also allows chaining so if you want an effect to apply when it is hovered over and active, you can use :active:hover

Instead of toggle use .add() and .remove() functions. Run snippet for an example.
document.querySelector("div").addEventListener("click", event=>{
event.target.classList.remove("red")
})
div{
width: 100px;
height: 100px;
background: green;
}
.red{
background: red;
}
<div class="red"></div>

Links not changing colour JavaScript

I have searched the internet for help on creating links that work like radio buttons as shown here:
http://jsfiddle.net/CXrgm/6/
However after trying many different attempts, I just don't get why it doesn't work. All that happens is that my active link stays active and none of the other links change to active class.
$('.account_links li a').click(function() {
$('.account_links li a').removeClass('active');
$(this).addClass('active');
});
.account_links {
list-style-type: none;
margin-top: 20px;
margin-left: 30px;
margin-right: 50px;
font-family: 'Raleway', sans-serif;
font-size: 20px;
display: block;
}
.account_links a {
color: #08c;
text-decoration: none;
}
.account_links li {
padding-bottom: 30px;
}
.account_links a:hover {
text-decoration: underline;
}
.account_links .active {
color: #08c08c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='account_links'>
<li>Home</li>
<li><a href='#'>Shop</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
I know I could set each link to active for each webpage, but I am doing something with JavaScript 'onclicks' and I don't think it will work but what the jsfiddle shows is exactly what I need.

If your trying to implement the li's dynamically use .on for binding its events.
eg.$("selector").on("event", function(){}) . This makes sure that the events will be binded to the element once it is created in DOM. However your scenario seems to static html ul li's.
In simple words here is what your code $('.account_links li a').click(function() {
$('.account_links li a').removeClass('active');
$(this).addClass('active');
}); is doing:
jQuery selector works from right to left. There are exceptions though, for example when the first operand is an ID. Then the search will operate in the context of the element with this ID.
It will have all the a tags and look up for ancestor li and then elements with class .account_links.
It will target the clicked element.
It will remove all the active classes from anchor tag.
Adds the active class to the clicked element, ref by (this) context.
Your working fiddle : Jsfiddle
Make sure you have included JQuery Library properly.

Link with a non-clickable background image

I have a menu that is formatted as an unordered list where the links (instead of the list items) have a background images that look like bullets. Due to the complexity of the CSS, I am not able to change this - the background images have to "belong" to the links, not to the list items.
My issue is that I would like to be able to have the links direct me to their respective pages, while also having the background images work to expand subcategories. This means that I need to somehow "separate" the background image from the link in order to reference it separately in my jQuery animation.
I would like to be able to do something like this:
$( document ).ready(function() {
$("#mainnav ul li").on("click", function(e) {
var $t = $(e.target);
if (!$t.is("a")) {
$(this).children("ul").slideToggle("slow", "linear");
return false;
}
});
});
because right now I am just using this and it doesn't work when I actually want to click on the links:
$("#mainnav ul li").click(function () {
$(this).children("ul").slideToggle();
return false;
});
I've attached a demo (though keep in mind that this not my actual code, it is just an example of how I would like this to work): http://jsfiddle.net/stamblerre/GzD3M/11/
I would like to be able to click on JUST the pencils to expand the subcategories so that I can use the text to click on the link and be directed to another page. Does anyone have any ideas on how to do this without associating the background-image with the list items rather than the links?
Thank you!!
With the help of many of the people on this thread, I've figured out my issue, here's the solution: http://jsfiddle.net/stamblerre/GzD3M/19/

You can check the clicked point to see if it's in the icon's region, actually we can just check the horizontal coordinates. We know that you set padding-left:15px for the a element, which means the icon's width is about 15px. If the clicked point is in the icon's region, we will let the click event propagate, otherwise stop it from propagating.
$('#mainnav ul li > a').click(function(e){
if(e.pageX - $(e.target).offset().left >= 15) {
e.preventDefault();
e.stopPropagation();
}
});
Demo.

You can send your background-image into a pseudo element and use pointer-events so it doesn't catch the click.
DEMO
#mainnav a {
margin-left: 20px;
background-repeat: no-repeat;
}
#mainnav a:before {
content: url(http://shapeshed.com/images/articles/pencil_icon.gif);
margin-left: -20px;
margin-right:5px;
pointer-events:none;/* this is where it happens if browser understands it */
vertical-align:middle;
}
#mainnav ul {
list-style-type: none;
}
#mainnav ul ul {
display: none;
}

just add next to the link another link with the pencil image inside with a unique class that will open the nested ul, something like this:
<ul>
<li>
<img src="pencil.jpg"> Click me
<ul style="display:none" class="nested_ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
jquery:
$(document).ready(function() {
$('.pencil').click(function(e) {
e.preventDefault();
$(this).parent().children(".nested_ul").slideToggle("slow", "linear");
});
});
it's 100% working!...good luck.

Toggle only one onClick imageChange at a time (toggle all other images to original state)?

I've got a navigation bar made of icons that change ("light up") when clicked, to indicate which div is currently being shown.
The problem is, I'd like it so when one image is changed (lit up when clicked), all the others revert to their original state.
Currently they are all just simple toggles, which means when I click one and then another, they both stay lit up, which I obviously do not want.
Is there a simple way to implement this?
Edit: I'm currently using this method of jQuery image toggling. I'm a real amateur so I don't know where I'd begin using each toggle to also toggle all of the other icons back to their original state.

Define a class to indicate the selected tab and use CSS to apply the highlight (show/hide an image, change background position of a sprite, whatever). Then:
$("#menu li").click(function (e) {
$("#menu li.selected").removeClass("selected");
$(this).addClass("selected");
});
Edit: To adapt your existing code to use CSS to apply the highlight, change your html so that each menu item has two images:
<ul id="menu">
<li>
<img class="off" src="menu1-original-icon.png" />
<img class="on" src="menu1-lit-up-icon.png" />
</li>
<li>
<img class="off" src="menu2-original-icon.png" />
<img class="on" src="menu2-lit-up-icon.png" />
</li>
...
</ul>
Then, use CSS to hide one and show the other:
#menu .on, #menu .selected .off
{
display: none;
}
#menu .selected .on
{
display: inline;
}
Here's a demo: jsfiddle.net/PLRfJ
To allow selecting none (click on selected deselects it), use .toggleClass() instead of .addClass() and exclude this when removing the class:
$("#menu li").click(function (e) {
$("#menu li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
jsfiddle.net/PLRfJ/1

Mouseleave jQuery event will remove the click effect

ok, I have a tabbed page and on click of a tab, I am showing a particular section and highlighting this tab to red background. Now I want to use the hover effect and on hover the tab should highlight to red background. It works but then when I mouseleave from the clicked tab, the background effect goes away.
In short, How do I highlight the tab to red background on hover for this fiddle

Why not use some pure css for this:
#nav ul li:hover { background-color: red; }
Updated Fiddle
EDIT
If you're trying to do this with jQuery (as a learning experience), I would define a new css class called hoverRed
.hoverRed { background-color: red; }
then use the hover function:
$("#nav ul li").hover(function() {
$(this).addClass("hoverRed");
}, function() {
$(this).removeClass("hoverRed");
});
The first function gets called when the hover begins, the second gets called when the hover ends (and the mouse leaves)
updated fiddle

Use this:
#nav ul li:hover
{
background: red;
}
Update:
Here is the fiddle for your mouseenter and mouseleave events. Here is the code that I added.
CSS
.lihover{background: red;}
jQuery
$("li").mouseenter(function(){
$(this).addClass("lihover");
}).mouseleave(function(){
$(this).removeClass("lihover");
});