I am making a website. I want to go from link to next page with ID. Like the following
Page Name: index.html
Rings
Page Name: collection.html
<ul class="nav navbar-nav" id="nav">
<li id="rings" class="active">Rings</li>
<li id="earrings">Earrings</li>
<li id="neckwears">Neckwear</li>
<li id="purses">Purses</li>
<li id="mini">Set an mini set</li>
</ul>
I try to take code and implement in this but not get any success.
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(function(){
var current = location.pathname;
var url = window.location.hash;
$('#nav li').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
});
});
});
</script>
I wan to put active class automatically in #nav list via using URL # value.
You can just use the pathname as a selector, like this: $('#nav li#'+current)
There is no reason to loop through all of them.
$(document).ready(function() {
$(function() {
var current = "rings"; //location.pathname
$('#nav li#' + current).addClass("active");
});
});
.active a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav" id="nav">
<li id="rings" class="">Rings</li>
<li id="earrings">Earrings</li>
<li id="neckwears">Neckwear</li>
<li id="purses">Purses</li>
<li id="mini">Set an mini set</li>
</ul>
You were just comparing to the wrong variable. Just change your code to the below
$(document).ready(function () {
$(function(){
var current = location.pathname;
var url = window.location.hash;
$('#nav li').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if("#" + $this.attr('id') == url){
$this.addClass('active');
}
});
});
});
Related
Here I have a tab-based nav-bar and I want to the active class functionality when someone clicks on the tab.
EX- Let us click the second tab, it should be active and fetch the data from URL on click.
Here the problem is in my code is - when I am clicking on the second tab the class is showing active but the content is not displaying.
Could you guys suggest any solution to render data dynamically from the database and set the active class to that tab when I click on that?
<div class="box-header">
<ul class="nav nav-tabs">
<li class="active" >Delhi</li>
<li>Mumbai</li>
</ul>
</div>
<script>
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
/script>
Please refer to this fiddle. You can use data attributes like in this fiddle.
JS Code:
$(document).ready(function () {
$('.nav li').click(function(e) {
var $_this = $(this)
$('.nav li').removeClass('active');
$_this.addClass("active");
var url = $_this.attr("data-url");
var data = {} //your post data
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
// Do somthing with your data
});
e.preventDefault();
});
});
HTML:
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-url="/delhi/list_sudents">Mumbai</a>
</li>
<li class="nav-item">
<a class="nav-link" data-url="/delhi/list_sudents">Delhi</a>
</li>
I'm having some real hard time adding class active to the li that contains the current page the site is on. URL = http://polissagethibodeau.com/
Here is the relevant HTML
<nav class="nav">
<ul class="sf-menu">
<li id="home">
Home
</li>
<li>
About us
</li>
<li>
Services
<ul>
<li>
Car, Truck and Vans
</li>
<li>
Semi, Boats, RV and Busses
</li>
<li>
Airplanes and Helicopters
</li>
<li>
Aluminum and Plexiglass polishing</li>
</ul>
</li>
<li>
Photos
</li>
<li>
Contact Us
</li>
</ul>
</nav>
CSS I am trying to apply
.sf-menu > li.active > a {
background: #c2e078;
}
Here is the script I am trying to use to no success.
$(function() {
var path = window.location.pathname.substring(1);
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');
});
YOU can do it by two or many way. Example project
Source LINK
1.----
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("nav ul a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
2.----
here's the code if u want to use plain javascript
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
window.onload = setActive;
3.----
function setActive() {
$('#nav').find('a').each(function () {
//console.log(document.location.href)
if (document.location.href == "http://......" + $(this).attr('href')) {
$(this).parents("ul").removeClass("hidden-ul");
$(this).parents().addClass("active");
}
});
}
window.onload = setActive;
Use a if statement to check if it is in the url:
<script>
$(function() {
var path = window.location.pathname.substring(1);
if(window.location.href = path) {
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');
}
});
</script>
Its because the HREF property of each of those links is going to be equal to a complete URL, not just file.php
You can get around this by using the $= operator which means (ends with)
Note in the DEMO I changed the var path assignment to just services.php so that it would work in the snippet.
Also, use the $(document).ready(function() { trigger to properly add a listener to an event
Note I realize that this example will cause all of the links to services.php to have the class active added to them. To get around this assign a custom class called navlink to each link in the navigation bar and then use
$('.navlink[href$="' + path + '"]:parent').addClass('active');
$(document).ready(function() {
//var path = window.location.pathname.substring(1);
var path = 'services.php#large';
$('a[href$="' + path + '"]:parent').addClass('active');
});
.active {
font-size: 1.75em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul class="sf-menu">
<li id="home">
<a href="./" >Home</a>
</li>
<li>
About us
</li>
<li>
Services
<ul>
<li>
Car, Truck and Vans
</li>
<li>
Semi, Boats, RV and Busses
</li>
<li>
Airplanes and Helicopters
</li>
<li>
Aluminum and Plexiglass polishing</li>
</ul>
</li>
<li>
Photos
</li>
<li>
Contact Us
</li>
</ul>
</nav>
$(document).ready(function () {
// Get previously stored url
if (sessionStorage.getItem("active-class-url"))
{
strLastUrl = sessionStorage.getItem("active-class-url");
$('.nav > li >a[href="' + strLastUrl + '"]').parent().addClass('active');
}
});
$(document).on(".nav > li > a", "click", function () {
// Remove active class from all ancher tag
$(".nav > li > a").parent("li").removeClass('active');
// Add active class to currenly clicked acnher tag
$(this).parent("li").addClass('active')
// Store value of active calss url. So on page refresh you can get it
sessionStorage.setItem("active-class-url", $(this).attr("href"));
})
The problem is your selector.
Instead of this:
$(".nav > li > a")
Use this:
$(".nav > ul > li > a")
Also remove the . (dot) before your paths, and this will work:
$(document).ready(function() {
var pathname = window.location.pathname;
$(".nav > ul > li > a").each(function() {
var $this = $(this);
if ($this.attr("href") === pathname) {
$this.parent().addClass("active");
}
});
});
Test:
$(document).ready(function() {
var url = window.location.toString();
$('#home a').attr('href',url)
$('#home a').text(url)
$('ul.sf-menu a').filter(function() {
if (this.href != '') {
if (this.href == url) {
console.log(this.href)
console.log(url)
$(this).addClass('active');
}
}
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul class="sf-menu">
<li id="home">
Home
</li>
<li id="stacksnippets">
stacksnippets
</li>
</ul>
</nav>
try above method I hope it helps you.
I don't know if i described the title correctly ...
Basically i have a jquery script that loads content when link is clicked.
I would like to know to say lets say i loaded /contents/about.php via jquery into the div i specified.
<li class="nav__item ">
<a class="header__link subdued" href="#home" data-target="contents/home">
<span class="complimentary push--left">Home</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#news" data-target="panel/admin/news/news">
<span class="complimentary push--left">News</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#/contents/about" data-target="contents/about">
<span class="complimentary push--left">About Us</span>
</a>
</li>
Is it possible for me to enter http://localhost/#/contents/about or even http://localhost/contents/about and it would as the same function as the jquery click load script.
Alternatively is there a simple way to have a back/forward setup in jquery content load?
script:
<script>
$(document).ready(function(){
var trigger = $('#nav ul li a'),
container = $('#wrapper');
trigger.on('click', function(){
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
Hope it makes sense.
jQuery:
$(document).ready(function(){
var cur = window.location.href;
var a = cur.split("/");
var pos = a.indexOf("#");
if(pos != -1){
var trigger = $('#nav ul li a');
var container = $('#wrapper');
target = a[pos+1]+""+a[pos+2];
container.load("http://localhost/"+ target + ".php");
return false;
}
});
Try this, if not useful then i will remove this, cause i don't understand what you want.
I have attached id with URL. Ex: When I click Link 1, it has #tab-2 id and it takes me to landing page. In landing page I have find which element has #tab-2 id then i have to add class .active.
I tried but no luck. Please any one correct my code. Thanks
JS Fiddle link
HTML
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
Landing Page
<div class="tab">
<ul>
<li><a id="tab-2" class="active" >LINK 1 Content</a></li>
<li><a id="tab-44" >LINK 2 Content</a></li>
<li><a id="tab-74" >LINK 3 Content</a></li>
</ul>
</div>
Jquery
$(document).ready(function(){
$(".menu ul li a").each(function(){
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);
var land = $('.tab').find("id");
if( land == id ) {
$('this').addClass('active');
}
})
});
Assuming I've understood your requirement, you can retrieve the hash value from the URL of the page using window.location.hash. You can then use that to directly select the required element and add a class to it on load of the new page:
$(function() {
var id = window.location.hash; // = '#tab-2', in your first link.
$(id).addClass('active');
});
Try this:
http://www.w3schools.com/jsref/prop_loc_hash.asp
$(document).ready(function(){
var hash = window.location.hash;
$(hash).addClass('active');
});
I hope it helps.
Replace $('this').addClass('active'); by $(this).addClass('active');
if( land == id ) {
$(this).addClass('active');
}
Use event.preventDefault it prevents the default action and Use window.location.hash to getting the hash element in the url
$(".menu ul li a").click(function(event){
event.preventDefault();
var url = window.location.hash;
$(".tab ul li a").removeClass('active');
$(url).addClass('active');
})
I want my JQuery to select one of the navigation links—based on the page that I'm on—and then I want it to move it to the top of the list.
This is the HTML of my navigation bar:
<nav>
<ul id=nav>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This is the JQuery I'm using to try and reorder the list:
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
var ul = $('nav').children('ul'),
li = ul.children('li'),
href = $('a[href*='+page+']');
//move element to top
ul.prepend(href.parent());
});
It isn't working and I would assume that it's because the href variable isn't being set correctly. alert(href); and alert(href.parent()); output nothing.
Any ideas? Thanks!
As #user3064914 said, you missed '#', but you missed quotes either:
<ul id = "nav">
var href = $('a[href*="'+page+'"]');
EDIT
Also, you can write a bit shorter with child selectors:
var ul = $('nav > ul'),
href = ul.find('> li a[href*="' + page + '"]');
ul.prepend(href.parent());
Try this, it will work.
<script>
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function()
{
var href = $('a[href='+'"'+page+'"'+']').parent();
var parent = $("#nav");
var childToMoveLast = href.remove();
parent.prepend(childToMoveLast);
});
</script>
Here is the HTML
<nav>
<ul id='nav'>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>