Switch active class when navigation links clicked jQuery - javascript

I'm trying to add jQuery to a website so when the link to the next page in the nav menu is clicked, then "active" class is switched to the "active" or current page. The "active" class is also set initially to the home page. Additionally, it's a website using Bootstrap so I was wondering if something was conflicting with my jQuery. Seems simple enough and my code works somewhat. It removes the active class from the Home page and briefly flashes on the next tab, but it does not stay "active." Here's the jQuery:
$(".nav li").click(function() {
$('li').removeClass('active');
$(this).addClass("active");
});
Any thoughts on what I may be doing wrong? Thanks in advance.
Andrew

I had a similar problem and wrote the following script:
var _urlpath = $(location).attr('pathname').split('/').pop();
$('#menu > li').each(function(){
var _this = $(this);
var _str = _this.find('a').attr('href');
_str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
});
It's fairly simple: filter the url path name, store it in a variable, and then most importantly, when a new page is loaded, loop through all the li's and try and match the url hash (I don't know the exact terminology), hash in the li > a's .
Alas, there might be a better way of doing this.

Related

Adding active class to directory

I'm trying to use jQuery to add an .active class to my Bootstrap navigation links. I'm using some simple code I found elsewhere but have had to modify it.
I want the .active class to be added to the relevant .nav-link when on any page in the relevant directory, e.g. to be added to the Photography link in the nav bar whether a user is on the /photography page or /photography/fashion page.
This is what I have so far;
$(document).ready(function() {
var urlFull = window.location.pathname.split( '/' );
var urlFirst = '/' + urlFull[1];
$('.navbar-nav .nav-link').each(function() {
if (this.href === urlFirst) {
$(this).addClass('active');
}
});
});
I'm pretty sure my issue is to do with the if statement, but I'm pretty new to Javascript and I can't see the problem! I've used console.log to check my variables and they correspond with the links set in the navigation.
Any help would be very much appreciated.
Answering my own question...
It looks like my issue was with this.href when it should have been this.pathname. It seems to be working correctly now, but time will tell when I've built more pages!

JQuery hide div based on url hash and string

I'm attempting to hide a div based on the url hash tag. I'm using a jquery plugin called zozo tabs that allows for deep-linking and it shows and hides divs.
There is a particular div on the page (not in the tab area) I would like to hide given the url/s. I've searched but cannot figure it out. Please excuse my javascript noobness!!! I've tried this. No such luck. It doesnt seem to work. Any help would greatly appreciated.
I've tried php but it doesnt work on the hash
To start the plugin creates this type of url
http://localhost:8888/site/funds/#tabbed-nav=fund-strategy
The html is:
<ul>
<li data-link="fund-strategy"><a>Fund Strategy</a></li>
<li data-link="portfolio-characteristics"><a>Portfolio Characteristics</a></li>
<li data-link="performance"><a>Performance</a></li>
</ul>
<div class="strategy">This copy shows when the li is clicked on</div>
This is me attempting to hide a div given the url with js
var jQ = jQuery.noConflict();
jQ(document).ready(function() {
var url = document.location.href;
if (url.indexOf('http://localhost:8888/site/funds/#tabbed-nav=fund-strategy') >= 0) {
jQ('.fourth').hide();
};
});
<div class="fourth">Hide me please!</div>
Just try to use something like this:
var currentHash = window.location.hash;
if (currentHash=="#tabbed-nav=fund-strategy") {
$('.fourth').hide();
}
Be sure that there is a html element with class 'fourth' in your html code. Otherwise this will not hide anything.
I think i pinpointed the problem. The zozo tabs utilizes hashchange. So after hitting my head against the wall and HUGE inspiration from users here. I downloaded the ba.hashchange and wrapped the given answers in a hashchange function here is the code if anyone is interested. This seemed to work.
var jz = jQuery.noConflict();
jz(function(){
jz(window).hashchange( function(){
// Alerts every time the hash changes!
var hash = document.location.hash;
if (hash == '#tabbed-nav=risk' || hash == '#tabbed-nav=fund-strategy') {
jz('.fourths').show();
} else {
jz('.fourths').hide();
}
})
jz(window).hashchange();
});

Active Link on javascript menu to work on parent link not just child link

I am trying to finish up my navigation for my site. I'm attaching the jsfiddle code to show you what code I have now. My problem is my child links become gray when they are suppose to but, I want to make the top level link when I click on that gray as well. The way I have my pages labeled is like this
Page1
Page1a
Page1b
Page2
Page2
.
.
.
ETC.
I need Page1 and Page2 to turn gray like the sublevels do. If anyone can help me with this I would really appreciate it. Thank you for your time.
http://jsfiddle.net/gUmYP/
<script type="text/javascript">
$('#body').ready(function(){
var URL = location.pathname.split("/");
URL = URL[URL.length-1];
//<![CDATA[
for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
$('#nav ul:visible').slideUp('normal');
$('#i'+i).slideDown(0);
$('#i'+i)
.find('li')
.each( function() {
var current = $(this).find('a')[0];
if (current.href == window.location.href)
current.style.backgroundColor = "#ccc";
current.style.color = "#006";
});
}
}
});
</script>
Previous question was here, but was never answered fully:
Highlight Links on Navigation
Unfortunately none of the answers below have solved my issue, some have made it so the parent link now highlights, but it makes the other features not work correctly. I need the menu to still highlight in yellow when I hover over everything, I need the submenus to still be the light blue when not active, and I need all active links(parent or child) to show the gray highlight that they are the active link. Does anyone know the solution to fix all those issues?
Look at this JSFiddle.
$('#nav li a').click(
(...)
// Here I removed the "active" class from all siblings "li"
$(this).parent().siblings().removeClass("active");
(...)
// Here I add the "active" class to this "li"
$(this).parent().addClass("active");
(...)
)
Note 1: The new JSFiddle

Dynamically Load Content

I want to load content using Ajax and keeping just the header from being reloaded, similar to this site.
So far I have this but don't know what else to add to get the same effect. I noticed that on that website that the URL also changes as well as the content apart from the header, which is exactly what I want. After looking through the source code I can't find anything that he's using apart from noticing the .php extension in the URL.
$('nav li a').click(function(){
// var pageurl = $(this).attr(href);
var pageurl = $(this).attr('href');
$('#wrap').load(pageurl);
});
What am I doing wrong?
Update
Sorry, I did miss out the quotes on the href although it still doesn't work for me.
$('nav li a').click(function(e){
var pageurl = $(this).attr('href');
$('#wrap').load(pageurl);
e.preventDefault();
});
You need to add quotes around the attr and also stop the link from changing page by adding preventDefault().
Edit:
I just noticed your selector is:
$('nav li a')
Are you sure it's not meant to be #nav or .nav (for ID or class)?
To achieve the change in the address bar, you need to use the history object of window.
Check https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
From that page:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Using JavaScript to switch through tabs without changing layout?

My webpage is at http://sarahjanetrading.com/js/j/index.html
I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now, And I want the layout to remain the same.
NEW :
This is my code so far:
<script type="text/javascript">
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab-content").hide();
$("ul#main-tabs li a:first").addClass("active").show();
$("#wrap > div").hide().filter(":first").show();
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
});
</script>
For the full HTML and JavaSript code (new) please go to http://sarahjanetrading.com/js/j/index.html
What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently.
Thanks
jQuery UI is probably the best solution. You can use the .tabs()
to accomplish what you are trying to do. You can also edit the layout easily by using ThemeRoller.
This quick test is working pretty well
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
Of course it doesn't consider the content of the tabs, but it's a start :)

Categories

Resources