I'm trying to add an active state to my 'li's' in wordpress, and I can see in the dev tools that it's adding the class but then it just disappears. Am I missing something obvious? It's a Wordpress nav. Thanks!
$(document).ready(function() {
$('#menu-nav a').click(function() {
$('#menu-nav a').removeClass('activeNav');
$(this).addClass('activeNav');
});
});
As Chris mentioned, it wouldn't be surprising if your links that are being clicked are redirecting to another page, causing the entire page to reload. If you'd like to prevent the anchors from redirecting to another page, you can use event.preventDefault() :
$(document).ready(function() {
$('#menu-nav a').click(function(e) {
e.preventDefault(); // this will cancel the action of the link
$('#menu-nav a').removeClass('activeNav');
$(this).addClass('activeNav');
});
});
Related
I am facing an weird issue, I have integrated the mega menu from https://codyhouse.co/demo/mega-dropdown/index.html
But the Category and sub category links are not getting clicked and not navigating to the links. I believe that might be some restriction in Js or Jquery.
Here is the site I am talking about http://puunnamiifashhions.com/punami/index.php
Please help me.
you need to user event.preventDefault() in jquery to prevent default behavior of <a> tag
read more here:jquery preventDefault
in your problem i think this script work:
$('p.close-menu a').click(function( event ) {
event.preventDefault();
});
above code in javascript is:
read more here
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
event.preventDefault();
}, false);
I need this to have a default page on load of aboutme.php but still have all the same functionality
function
$(function(){
$(document).on('click', '.content-link, #profile-body a',function(e){
e.preventDefault();// prevent browser from opening url
$('#profile-body').load(this.href);
});
});
body
<div id="profile-body"></div>
So before any link is clicked to load into the div; the div has already loaded the aboutme.php page, hopefully this makes sense, and thankyou for any help in achieving this.
You have this for the links:
$(function(){
$(document).on('click', '.content-link, #profile-body a',function(e){
e.preventDefault();// prevent browser from opening url
$('#profile-body').load(this.href);
});
});
But you need: when the page loads,
$(document).ready(function() {
var defaultPage = "aboutme.php";
$('#profile-body').load(defaultPage);
});
And that's all. Just add this code after your code, don't replace your version.
You might want to use .ajax instead of .load (when aboutme takes some time to load)
This way you can abort the request when user clicks your content Link while aboutme is still loading:
Aborting jQuery().load()
If you're loading a small snippet, this is probably overkill and you should ignore this post.
If not... just sayin
I am using wordpress visual composer tabs in my wordpress theme, I am also using same tab menus in Wordpress main menu with hastags like #mylink. When I click on that anchor tag in menu I given page reload option. But before page reload it is scrolling down for it's related content of that tab content.
Here is the code that I am using
$('.sub-menu .menu-item a').click(function(e) {
location = this.href;
location.reload(true);
});
I want to remove the scroll when you click on the the hashed anchor tag.
for reference URL: http://wtastudios.com/novus2/projectsservices/#solar_Rooftops
Try this
$(document).on('click','.sub-menu .menu-item a',function(e) {
if($(this).attr('href')).indexOf('#') > -1){
//return false;
e.preventDefault();
}
});
dont use clik() anymore, on is better, because it is been trigger even after document.ready.
then you must target only href that contains #.
I'm creating a one-page website and I've found a small script for smooth scrolling and it works perfectly. But, if you leave the homepage and go to a single post or eventpage, the navigation doesn't work anymore because the anchor isn't on the existing page.
And another issue, when scrolling manually, it would be awesome if the active link could change class like it does when you click it.
Can anyone help me fix this issue? Thanks!
jQuery(document).ready(function($) {
$("#primary-menu li a").click(function(event) {
event.preventDefault();
$('#primary-menu li').removeClass('current_page_item ');
$(this).parent().addClass('current_page_item');
$('html,body').animate( { scrollTop:$(this.hash).offset().top - 68 } , 1000);
} ); } );
i got page with multiple open/hide divs and the problem here is that everytime i try to click one to open or hide the screen jumps at the top of the page..
Anyone idea how to fix this? Javascript is used to hide divs.
Thanks!
$(function() {
$('a.hide').click(function() {
$(this).closest('.hideable').find('.hide-container').toggle();
});
$('a#hide-all').click(function() {
$('.hide-container').hide();
});
$('.hide-container').hide(); });
It sounds like you are using href="#", don't do that, build on things that work instead.
If you’re using an A tag to open close the DIV’s, it means that in Javascript you’ll need to disable the default action for the A tag.
In jquery for example:
$('a').click(function(e) {
e.preventDefault();
});