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>

Set outline border on a focused element

My code loads various items on some button click event into the document.
I managed to set the focus properly on the first item from those freshly loaded items once there all have been displayed using the following code:
$(function () {
$("a.getfocus").focus();
});
This works but I would also like the browser's default outline to show up on this focused item.
Is there any easy solution to achieve this ?

With the :focus pesudoselector to the element and the outline property:
outline: [properties]
Say, you have a link which usually shows an outline on focus (yep, that's the default behaviour):
<a id="test" href="https://test.com">Test</a>
With CSS, you can do the following:
#test {
outline: 1px dotted red;
}
to get a red outline. Usually, you'd want to do:
a {
outline: none;
}
Back to your question, you can do:
a:focus {
...
// rules
...
}
You can see a small sample here.

Why do Angular UI buttons have a different focus border in Chrome than they do in IE?

Can anyone tell me why button focus borders are rendered with a black dashed border by default in IE11 and with a blue solid border in Chrome? You can see this if you go to http://angular-ui.github.io/ and tab over the Site/Code buttons with IE11 and Chrome.
I've tried various overrides like -webkit-appearance:none etc to no avail. Is this an AngularUI bug, or a browser quirk everybody knows about and have been working around that I'll need to special-case if I want the look to be uniform?

When you tab over the button, you are applying the element's :focus styling. Looking at the stylesheet which is being used, I cannot see any custom styling for this, so the browser is providing it's default focus styling.
If you want to override this, then you can write your own focus style. So for this particular button, you can use:
a.btn.btn-primary.btn-large:focus{
outline: 0;
/* add other styling to it */
}
Or if you want to just target all anchors on the page, then use
a:focus{
outline: 0;
}

Angular is adding the dotted lines on this occasion - to remove, do this in your CSS;
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
outline: 0;
}

Remove menu hover action after clicking the menu in jquery

I have a dropdown menu that works by Classic CSS hover
if you've opened the menu with a click event, i need the hover effect to be removed but i can't because you're still hovering over the menu the menu doesn't disappear until you hover off which isn't ideal. I also tried using .hide() but then that messes with CSS hover functionality.
Is there a way in jQuery to remove the CSS hover activation of an element?
$("ul.nav > li").click(function(e) {
var url = $(this).attr("url");
$(this).css('background', '#bbb');
if( url == 'logoutServlet') {
$.get('logoutServlet');
window.location = "/a";
}else{
$("#content").html('Loading...').load(url);
}
});

Hover state is not a class, you should use CSS to change hover behavior of an element.
for example:
a.whatever { color: black; } /* Default state */
a.whatever:hover { text-decoration: none; color: black; } /* Hover state */
You can match hover state rules with other states behavior to make it look the same.

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");
});