Trying to make a link "active" when another link is clicked - javascript

I need help help editing the following JavaScript.
<script>
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
===================================================================
In addition to the existing functionality, I need "link2" to become "active" when "link1" is clicked. See HTML below.
<h1 class="brand">Brand</h1>
<ul class="nav">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>

You can use the below code. A jsFiddle sample is available here.
$('.nav li a').on('click', function (event) {
event.preventDefault(); //Add this only if you want to stop the default link action.
$(this).parent().siblings('li').removeClass('active');
$(this).parent().addClass('active');
});
//The below is to make #link2 active whenever #link1 is clicked.
$('.brand a').on('click', function () {
$('.nav li:first').addClass('active');
$('.nav li:first').siblings('li').removeClass('active');
});

Assuming you should only have one active element on the page, you could do something like this.
$('.nav li a').on('click', function() {
$('.active').removeClass('active');
$(this).parent().addClass('active');
});
If not then you can use closest like so
$('.nav li a').on('click', function() {
$(this).closest('.active').removeClass('active');
$(this).parent().addClass('active');
});
From your comment i think this could work
$('.nav li a').on('click', function() {
$('active').removeClass('active');
var link = $(this).attr('href'), // link1
number = parseInt(link.substr(-1)), // 1
newHref = link.slice(0, link.length - 1) + number++;
$(newHref).addClass('active');
});
so if you click on link1 then link2 will get the active class and click on link2 then link3 will get it and so on....

Related

Highlighting active link with jquery

I'm trying to highlight the active link, it does highlight it but the underline is suddenly removed. Can't figure out what I'm doing wrong:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).parent().addClass('active');
}
});
});
HTML:
<nav>
<ul>
<li><a class="active" href="#intro" title="Intro">Intro</a></li>
<li>What We Do</li>
<li>How We Do It</li>
<li>Our Modus Operandi</li>
</ul>
</nav>
Any help? Thanks.
I can say what you are doing wrong!! You are removing active class from a tag and then you are adding it to it's parent which is li. So basically what you need to do is add it back to current a and you can do so just by removing .parent() before adding active class and your updated function will be as below:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).addClass('active');
}
});
});
This one is simpler and it does the job:
$('nav li').click(function(e) {
e.preventDefault();
$('nav li a.active').removeClass('active');
$('a', this).addClass('active');
});
Fiddle here.

Changing the website-url to http://my.url#menuitem on click on menu item?

I'm writing a small website where I already implemented a JavaScript code to change to content of a div if an item in the menu bar is clicked. I know have the problem, that if someone refreshes the website, they are at the start-page again. I want to change this so the name of the menu item is added to the url with a # in front of it. Wikipedia does this in some way if you click on an item in the content-overview of an article.
My question is now how I can achieve this?
This is my current JavaScript code:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
});
});
And this the menu part of my HTML:
<div id="menu">
<ul>
<li>Über mich</li>
<li>Kinesiologie</li>
<li>Körbler Symbole</li>
<li>Energiearbeit</li>
<li>Ernährungsberatung</li>
<li>Diätberatung</li>
<li>Food Coach</li>
<li>Heilkräuterberater</li>
<li>Heilkräuterprodukte</li>
<ul>
<li>Salben</li>
<li>Öle</li>
<li>Pflege</li>
<li>Bad/Dusche</li>
<li>Allerlei</li>
</ul>
</ul>
</div>
And sorry for the bad description, I have absolutely no idea how to call this.
You can try this:-
At first add an attribute in the menu.
<div id="menu">
<ul>
<li data-btn-name="ueber_mich">Über mich</li>
<li data-btn-name="kinesiologie">Kinesiologie</li>
</ul>
</div>
At the time of clicking on the menu change the location hash of the page
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).attr('data-btn-name');
$('#content').load(page);
});
});
At the time of opening the page first time, load the content depending on the hash.
$('document').ready(function(){
if(window.location.hash){
$('#content').load('./content/'+window.location.hash+'.html');
}
})
you can simply use this if text name is same as file name:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).text();// if you want to show text of the li
console.log($(this).text());
$('#content').load(page);
});
});

Mailto or hyperlink doesn't work on footer menu due to submenu script

Do to my submenu script my mailto link or any hyperlink doesn't work and i don't why and where in the script it causes problems.
$(function () {
$('footer > ul > li a').click(function(event) {
event.preventDefault();
event.stopPropagation();
var $parentli = $(this).closest('li');
$parentli.siblings('li').find('ul:visible').hide();
$parentli.find('> ul').stop().toggle();
});
});
$(document).click(function() {
$("footer ul li ul").hide();
});
Fiddle: http://jsfiddle.net/foroloca/65t6gk5n/
You're calling event.preventDefault();. This prevents the default functionality of the event, and ultimately prevents your link from being fired.
If you need this functionality in place for the other a elements in your footer, I suggest you add a class name specifically to those and modify your event handler to only apply to those elements:
<ul>
<li>
...
</li>
<li>
...
</li>
...
</ul>
$('footer > ul > li a.prevent-default').click(function(event) {
event.preventDefault();
...
});
JSFiddle demo.
You can use selector by href.
$('footer > ul > li a[href="#"]')
And all hyperlinks with hash in href (href="#") will fire with your onclick handler
http://jsfiddle.net/65t6gk5n/3/

jquery make action when link menu item is clicked

I have three menu items here:
JSFIDDLE: FIDDLE LINK
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active">Blue<sup>beta</sup></li>
<li>Green<sup>beta</sup></li>
<li>Red</li>
</ul>
</div>
By default link blue is active.
I want whenever any link green or red is clicked, it should be active
Color of the label should be changed as per the link selected
I am facing trouble in this points.
You could add a DATA color on your li like that :
<li data-color="#0f0">Green<sup>beta</sup></li>
then use this code :
$(function () {
$(".menu-bar li a").click(function () {
$('.active').removeClass('active'); //Remove the current active item
var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
$("#l1").css("color", color); //Change color
});
});
Fiddle : http://jsfiddle.net/ZjgV4/6/
Something like this?
$(function () {
$(".menu-bar li a").click(function () {
$(".menu-bar li").removeClass("active");
$(this).parent().addClass("active");
});
});
http://jsfiddle.net/3mhCW/1/
Without completely doing everything, this should point you on the right track. A few things to note about your code - You should pass in the e event, to the click handler and use jQuery's e.preventDefault(); to stop the link. Also, you need to quote the value in the css function. .css("color", "red") otherwise you will get an undefined error that red is not defined. Instead of manipulating the css of the elements, I would use add/removeClass respectively and style the elements with css.
$(function () {
$(".menu-bar li a").click(function (e) {
e.preventDefault(); // stop the link from following the href
// remove the active class from everything
$(".active").removeClass("active");
// $(this).css("color", "red");
$(this).addClass("active");
});
});
I included the code here.
basically, i inserted the color name to a class each color has its own class and each LI has a global attribute data-* with the value of the color (the name of the class)
HTML:
add to all the li the attribute data-color="blue"
Add CSS:
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.red{
background-color:red;
}
jQuery:
$(function () {
$(".menu-bar li a").click(function () {
$('.menu-bar li.active').removeClass('active');
$(this).parent().addClass('active');
$("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));
});
});

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>
I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​
At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>
There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/

Categories

Resources