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.
Related
Hi i am trying to select navigation item once user click on them and they should remain selected once page load up. I have tried many examples and none is working for me.
Here is what i have in header.
<nav id="navigation">
<ul id = "nav-ul">
<li>item1</li>
<li> item2</li>
<li>item3</li>
</ul>
</nav>
And here is what i have in script.js. Script is added in all files.
last one i tried
$(document).ready(function(){
$('#navigation ul li a').each(function(index) {
if(this.href.trim() == window.location)
$(this).addClass("selected");
});
});
Than tried this
$(document).ready(function(){
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#navigation ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
$("#navigation ul li a").selected
})
});
Nothing seems to work.
this is ypur mark up
<ul id = "nav-ul">
<li><a href="<?php echo $this->base?>/Logins/index" >item1</a></li>
<li> <a href="<?php echo $this->base?>/Logins/item2" >item2</a></li>
<li><a href="<?php echo $this->base?>/Logins/item3" >item3</a></li>
then
get the file name
filename = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
then by jquery find the anchor tag
$("a[href$="+filename +"]").addClass("selected")
hope this would help you
For your current html markup, this is the code you'll need in order to achieve the kind of effect you are looking for.
CSS:
ul li {
list-style-type:none;
margin-bottom:10px;
}
a {
color:Orange;
font-size:18px;
font-weight:bold;
}
.active {
color:red;
}
jQuery:
$(document).ready(function () {
$("a").click(function (event) {
$('#navigation ul li a').each(function (index) {
$(this).removeClass("active");
});
$(event.target).addClass("active");
});
});
You can see this here: http://jsfiddle.net/V5XhN/
Hope this helps!!!
I'm trying to make menu with collapsable submenus.. I'm very new to jQuery) My code:
<script type="text/javascript">
$(document).ready(function(){
$('#list> li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#list> li').toggle(function(){
$(this).find('ul').slideDown();
}, function(){
$(this).find('ul').slideUp();
});
});
</script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"/>
<ul id="list">
<li>SUBMENU1
<ul>
<li>M11</li>
<li>M12</li>
<li>M13</li>
<li>M14</li>
</ul>
</li>
<li>SUBMENU2
<ul>
<li>M21</li>
<li>M22</li>
<li>M23</li>
<li>M24</li>
</ul>
</li>
</ul>
It works fine now, but I want all opened submenus to be closed automatically when I click on another submenu.. So there will be only one opened submenu at a time.
$('#list > li').siblings().find('ul').hide();
$('#list > li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$(this).siblings().find('ul').slideUp();
$(this).find('ul').slideDown();
});
Demo:
http://jsfiddle.net/2QKe9/
Updated Demo:
http://jsfiddle.net/2QKe9/2/
Try this way
$(document).ready(function(){
$('#list> li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#list> li').click(function(){
if($(this).find('ul').is(':visible'))
{
$(this).find('ul').slideUp()
}
else
{
$(this).siblings().find('ul').slideUp()
$(this).find('ul').slideDown();
}
});
});
DEMO
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....
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/
I'm making a drop down menu and it works great in all modern browser but im not sure, it fails in IE, when i try to select the sub-elements of the submenu, it disappears.
This is the page: http://XXX/
and this is the JS code
$("nav li").hover(function(){
$(".subnavi-wrapper", $(this)).show();
}, function(){
$(".subnavi-wrapper", $(this)).hide();
});
EDIT: Apparently it's the margins on top of the dropdown which seem to activate the "mouseout" in IE! Aparently jQuery detects badly the area of the items with position absolute! :(
It's all because block "subnavi-wrapper" in Li element. You must remove DIV and try do it only by using Ul element. I made something like it here: http://www.muzykakoncerty.pl
here, something like this:
$('#menu > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
and my menu HTML code is:
<div id="menu">
<ul>
<li>
wstęp
</li>
<li>
<ul>
<li>Big Band</li>
<li>Arti Sound Concert</li>
<li>Leszczyńska Kapela Barokowa</li>
</ul>
zespoły
</li>
<li>
<ul>
<li>Dancing Sisters</li>
</ul>
taniec
</li>
<li>
o mnie
</li>
<li>
kontakt
</li>
</ul>
</div>
EDIT:
so try it:
$('nav > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
What you have uses the multiple selector selector will show/hide both the nav li and the .subnavi-wrapper. I think you only need to toggle the .subnavi-wrapper
$("nav li").hover(function(){
$(".subnavi-wrapper").show();
}, function(){
$(".subnavi-wrapper").hide();
});
If you only want to show the .subnavi-wrapper under the current li:
$("nav li").hover(function(){
$(this).find(".subnavi-wrapper").show();
}, function(){
$(this).find(".subnavi-wrapper").hide();
});
// show
$("nav li").live('mouseover',function(){
$(".subnavi-wrapper").show();
});
// hide
$("nav li").live('mouseout',function(){
$(".subnavi-wrapper").hide();
});