I made a process bar using jquery and it is clickable also.But i want that if i was in second process bar then it can go only on previous bar by clicking on that and will not go to the next bar when i clicked.
Please see the jquery and tell me the condition for that.
jQuery('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = jQuery('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = jQuery('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
jQuery(this).parents('li').addClass('active');
//hide displaying tab content
jQuery(active_tab_selector).removeClass('active');
jQuery(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = jQuery(this).attr('href');
jQuery(target_tab_selector).removeClass('hide');
jQuery(target_tab_selector).addClass('active');
});
Here is the html:
<div class="mesre-tab">
<ul class="nav nav-tabs">
<li class="active collar_tab">
COLLAR
</li>
<li class="cuff_tab">
CUFF
</li>
<li class="pocket_tab">
POCKET
</li>
<li class="monogram_tab">
MONOGRAM
</li>
<li class="size_tab">
SIZE
</li>
</ul>
</div>
if anyone knows it, please help me out.
Thanks
Related
I have made a bilingual website in Squarespace. I am not in developper mode, so have limited access to the code. I can insert javascript / HTMl / CSS in the header, or on the page, and have used this to override several aspects such as changing the company logo in the header, and pointing it to alternate URLs with JS.
What I am trying to do is make a specific link "English" or "Francais" in my navigation act differently depending on the page (if you're on the French version of a page, clicking English in the navigation would direct you to the english version of that page). Currently, the [EN] and [FR] links in the nav simply go to the english or french homepage. They are "Link" type "Pages" in squarespace and look like this when you inspect them:
<li class=" external-link">
[EN]
</li>
Copying the selector yields:
#topNav > nav > ul > li:nth-child(7) > a
I have included this code on my page. The first function that was recommended by a wonderful user here made the french logo (overridden from the english logo set in the panel) link to the french home page, I was hoping the second part would make the nav link act as I want:
<script>
var logo = document.querySelectorAll('h1.logo');
logo[0].addEventListener("click", function() {
location.href = "/home-fr";
})
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) >
a');
eng[0].addEventListener("click", function() {
location.href = "/englishpage";
})
</script>
This is a slightly different situation vs making the logo link, because the logo was not a link to begin with.Perhaps that or my selector is why this does not work?
Edit - Here is the whole HTML for the Nav:
<div id="topNav">
<nav class="main-nav dropdown-hover"><ul data-content-field="navigation">
<li class="gallery-collection">
selected work
</li>
<li class="page-collection">
about
</li>
<li class="page-collection">
contact
</li>
<li class="gallery-collection">
réalisations
</li>
<li class="page-collection">
agence
</li>
<li class="page-collection">
coordonnées
</li>
<li class=" external-link">
[EN]
</li>
<li class=" external-link">
[FR]
</li>
<li class=" external-link">
return / retour
</li>
</ul>
</nav>
</div>
Note that most of these links are hidden through the CSS depending on which page you're on - For example, on a french page, only childs 4,5,6, and 8 are visible.
You have two options for accomplishing this.
For the Englinsh link
Change the href of the anchor to a new one like so:
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].href = location.pathname.replace('-fr', '');
Use a click event handler like you were doing.
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].addEventListener("click", function(e) {
e.preventDefault();
location.href = location.href.replace('-fr', '');
return false;
});
For the French link
Change the href of the anchor to a new one like so:
var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].href = location.pathname + '-fr';
Use a click event handler like you were doing.
var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].addEventListener("click", function(e) {
e.preventDefault();
location.href = location.href + '-fr';
return false;
});
I want menu item to be highlighted when an item is selected in the drop down. I tried following code. Code is working if I prevent default behavior of a which I don't want, So I tried using local storage but it is not working, only page refreshes and default Home item of menu is highlighted.
Menu
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Fire & Water <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Storm Damage</li>
<li>Commercial Restoration</li>
</ul>
</li>
<li class="dropdown">
Mold <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Mold Remediation</li>
<li>What is Black Mold?</li>
<li>Mold "Removal" vs Remediation</li>
<li>Commercial Mold Remediation</li>
</ul>
</li>
</ul>
This is Working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(e){
e.preventDefault();
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
$("li").removeClass('active');
$('a[href="' + hrefs + '"]').parents('li').addClass('active');
});
});
This is not working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(){
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
localStorage.setItem('activeTab', hrefs);
var activeTab = localStorage.getItem('activeTab');
$("li").removeClass('active');
alert("activeTab : " + activeTab);
$('a[href="' + activeTab + '"]').parents('li').addClass('active');
});
});
I think, you have to apply active class on page load event not in click event. your code should be something like as below
$(document).ready(function(){
// activate left navigation based on current link
var current_url = window.location;
$('.dropdown-menu li a').filter(function () {
return this.href == current_url;
}).last().parents('li').addClass('active');
});
On every page load, you have to filter out link of current page from your navigation bar and then apply class active in parent. I have posted code for your explanation purpose you have to modify as per your HTML code structure.
Hope, this will work :)
I have a page with a list of menu items consisting of internal anchors. I'm trying to add an .active class to the selected item. It seems to work on load but when clicking a new item in that same page it doesn't.
When clicking a new menu item, I would like to remove all other active classes and add this class to the clicked item.
Sounds pretty simple, but I can't make it work.
I created this Fiddle, but it doesn't show the issue correctly, since I can't add hashes to the url.
However, maybe someone can point me in the right direction.
JS:
function setActiveLinks() {
var current = location.pathname;
$('.bs-docs-sidenav li a').each(function() {
var $this = $(this);
// Get hash value
var $hash = location.href.substr(location.href.indexOf('#') + 1);
if ($this.attr('href') == '#' + $hash) {
$this.parent().addClass('active');
}
})
}
setActiveLinks();
$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
setActiveLinks();
});
HTML:
<ul class="nav bs-docs-sidenav">
<li>
Download
</li>
<li class="active">
What's included
<ul class="nav">
<li class="active">Precompiled</li>
<li>Source code</li>
</ul>
</li>
<li>
Compiling CSS and JavaScript
<ul class="nav">
<li>Installing Grunt</li>
<li>Available Grunt commands</li>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
Thanks. :-)
You have wrong selector to bind click event on anchor element. also you don't need to call setActiveLinks() function(which sets class based on href) here.
You can use context of clicked anchor element to traverse to parent li and add class active in it:
var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
$navLIs.removeClass('active');
$(this).parent().addClass('active');
});
Working Demo
I have a tabbed menu, and one of the page in tabbed menu has a link that need to go to the another tabbed page.
How to do this? I tried the smooth scroll but it's not working.
JSfiddle
HTML:
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
<li>
<div class="content__wrapper">
Link
</div>
</li>
</ul>
</section>
try the following click event:
$('[data-anchor="#tab1"]').on("click", function(e){
e.preventDefault();
$(".tabs > li").removeClass("active"); //Remove class from active tab
$('.tabs > li:first').addClass("active"); //Add class active to clicked tab
clickedTab = $(".tabs .active"); //Update clickedTab variable
// fade out active tab
activeTab.fadeOut(250, function(){
$(".tab__content > li").removeClass("active"); //Remove active class all tabs
var clickedTabIndex = clickedTab.index(); //Get index of clicked tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active"); //Add class active to corresponding tab
activeTab = $(".tab__content > .active"); //update new active tab
activeTabHeight = activeTab.outerHeight(); //Update variable
//Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function(){
activeTab.delay(50).fadeIn(250); // Fade in active tab
});
});
});
see demo:
https://jsfiddle.net/yzpjcm9b/
I have a problem with a drop down menu that must remain open to the click.
After the menu is open, you can click the link inside and the menu item just clicked.
How can I do to remedy the preventDefault ?
Menu HTML:
<nav class="main-menu">
<ul id="" class="menu">
<li>
Menu One
<div class="sub-menu">
<ul>
<li>test test test</li>
... More links ...
</ul>
</div>
</li>
... More items ...
</ul>
</nav>
This is a portion of code
$('.main-menu li a').click(function(event) {
event.preventDefault();
$('.main-menu').find('.sub-menu').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
An example is visible here JSFIDDLE
Just remove
$('.main-menu').find('.sub-menu').removeClass('open');
Here is a fiddle you can check out
Get rid of event.preventDefault();
Instead do like this
<a href="#" onclick="return false">
Then give each main menu a class name. And call the click event on that class.
https://jsfiddle.net/btevfik/9m9rufqx/3/
You can replace your selector with a more targeted (.menu > li > a) :
$('.menu > li > a').click(function(event) {
event.preventDefault();
$('.sub-menu.open').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
JSFiddle