I am using Bootstrap and I want when the user clicks a nav link to remove class from current < li > (this works) and add active class to the clicked one (this does not).
The second thing is that I want to update the .container-fluid div using AJAX .load() but for some reason does not work. I have a separate html file. I did it before but not using Bootstrap and code worked so I do not know what is the problem now.
Code below
$('nav a').on('click', function(event) {
event.preventDefault();
/* Act on the event */
var url = this.href;
$('nav li.active').removeClass('active');
$(this).addClass('active');
$(".content").remove();
$(".container-fluid").load(url + '.container-fluid').hide().fadeIn('slow');
});
HTML - nav
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<other bits>
<ul class="nav navbar-nav">
<li class="active">One </li>
<li>Two</li>
<li>Three</li>
And HTML - just the divs responsible for swapping divs on both HTML sites look like this.
<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-10 col-sm-offset-1 col-md-offset-1">
<div class="row">
you need to add class to li
change your code to
$(this).parent("li").addClass('active');
which will add the active class to li that has wrapped a
Related
I have a question for you.
I have a sidebar with a dropdown "toggle buttons". The code HTML are the following.
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item" id="sidebar">
<a class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1" href="#firstSubmenu" data-toggle="collapse"
aria-expanded="false" class="dropdown-toggle">Performance Monitoring<span data-feather="plus-circle"></span></a>
<ul class="collapse list-unstyled" id="firstSubmenu">
<li>
<a class="nav-link" href="#">
<span data-feather="monitor"></span>
Dashboard</a>
</li>
<li>
<a class="nav-link" href="/conto_economico">
<span data-feather="trending-up"></span>
Conto Economico</a>
</li>
....
All works perfectly, but If I open my dropdown menu and after I update or change the url page, the dropdown menu collapse and I'm force do open it again.
So I looked for a jQuery code that give me the possibility to achive my aim. I fund that it's possibile to use localStorage to memorize if a dropdown menu is open or not and when upload the page give the same opened and closed dropdown menu.
I have tried to adapt the code for my aim, but I'm not good at jQuery code. I have tried the following code but does not work
$("#sidebar li a").on("click", function() {
// get index of parent `<li>` within it's siblings
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
localStorage.setItem("sidebar_selected", selected_item_index);
});
$(function() {
$("#sidebar li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active").siblings().removeClass('active');
});
You have set the container as li element and you are trying to find its index in set of anchor element. You need to instead find the index in set of li element. like this
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
Also, You may want to remove the active class from other sibling elements after setting the li class active using setStorage. Also, the keyname used for getstorage and setstorage are different. They should be same instead
$("#sidebar li").eq(parseInt(localStorage.getItem("sidebar_selected "))).addClass("active").siblings().removeClass('active');
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
I am making a website with a free template and i dont know JS really well. So i made a research and figured JS causing the problem.
So here is the relevant HTML and JS codes:
var clickMenu = function() {
$('#navbar a:not([class="external"])').click(function(event) {
var section = $(this).data('nav-section'),
navbar = $('#navbar');
if ($('[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top - 55
}, 500);
}
if (navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded', 'false');
$('.js-fh5co-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<i></i>
<a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</nav>
At the bottom of the function, the return false; statement is triggering on every link; regardless of whether it's an in page anchor, or linking to another page. This will prevent the browser from jumping to other pages.
I've changed your (relevant) code around some, and posted some new jQuery (with comments):
The target was removed from data-nav-section, and placed directly into the href. This reduces some superfluous code, as well as makes it so these will function on browsers without script support. Instead of a nice scroll, they will simply jump. But - since the JS is being used to stop the browser's functionality - browsers with script support will function fine.
I am using rel="external" instead of 'class="external", becauseclassis only useful to CSS;rel` can be used just as easily by CSS, but can also be interpreted by automated systems (like bots and search engines).
I've also replaced the class="active", with aria-current="page". Again, CSS works with both equally well, but aria-current="" works with accessible systems (i.e. screen readers).
NOTE: I am unsure what the if (navbar.is(':visible')) {... code block is for, so I have left it out of my example for now.
$('document').ready(() => {
$('#navbar a:not([rel="external"])').on('click', function(event) {
// Assign target element to the variable targetElement.
let targetElement = $("#" + $(this).attr('href').split('#')[1]);
// If the target element exists, it will have a length. If it doesn't exist, the browser will do its own thing.
if (targetElement.length) {
// Scroll browser window to the top of the element (-55px)
$('html, body').animate({
scrollTop: targetElement.offset().top - 55
}, 500);
// End funtion processing, and prevent the browser from performing any more actions.
return false;
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<i></i>
<a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li aria-current="page"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="about" style="height: 200px; width=900px; background-color: #0F0;">
<h2>About</h2>
</div>
<div id="services" style="height: 200px; width=900px; background-color: #00F;">
<h2>Services</h2>
</div>
<div id="contact" style="height: 200px; width=900px; background-color: #F00;">
<h2>Contact</h2>
</div>
</div>
</nav>
I have a single page site with content placed inside an accordion. I need to both open and scroll to the accordion item when a user clicks on my nav at the top of the page. I found a couple similar functions, this being the closest (Open JQuery accordion when link with an id of element within the accordion is clicked) but unfortunately the jsfiddle links are no longer working.
Right now I just have thecode to get the accordion working...Need to get the scroll to part in there somehow...Thanks!
Code
var accordion_head = $('.accordion > li > .toggle-bar');
accordion_head.on('click', function (event) {
var $a = $(this);
event.preventDefault();
if ($a.hasClass('active')) {
$a.removeClass('active').siblings('.content-wrapper').slideUp();
}
else {
$a.addClass('active').siblings('.content-wrapper').slideDown();
}
});
.accordion li .content-wrapper {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li id="1">
<a class="toggle-bar" href="#one"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="2">
<a class="toggle-bar" href="#two"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="3">
<a class="toggle-bar" href="#three"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
</ul>
I want that my page to stay at the current position scrolling when I press the button to activate the .slideDown() or slideUP() function.
Do you have an ideea how to do that ?
My structure looks like that :
HTML :
<nav class="container-fluid">
<div class="row">
<div class="col-lg-12">
<ul id="navbar-collapse1" class="hover-effect">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<header>
<ul class="col-lg-12 navbar-fixed-top">
<a href="#"><li class="toggle-button" data-letterfx="custom[0]">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</li></a>
</ul>
</header>
jQuery looks like this:
$(document).ready(function () {
$(".toggle-button").click(function () {
$("nav").slideDown();
});
});
This is caused by the hash value in your anchor href.
Try adding e.preventDefault(); to you click event handler
$(document).ready(function (e) {
$(".toggle-button").click(function () {
e.preventDefault();
$("nav").slideDown();
});
});
Also, notice the e parameter now being passed in