I have one button and bootstrap tab.
on click of button want to add class active to first tab element.
I'm generating all tab elements dynamically , and want to active only very first tab element on button click.
MyButton
<ul class="nav nav-tabs">
<li>div1<i class="fa"></i></li>
<li>div2 <i class="fa"></i></li>
</ul>
Here is a JSFiddle, clicking the button you have the first tab with class active:
HTML:
<ul class="nav nav-tabs">
<li>div1<i class="fa"></i>
</li>
<li>div2 <i class="fa"></i>
</li>
</ul>
<button class="btn btn-default clickme">Click</button>
JS:
$(document).ready(function () {
$('.clickme').click(function () {
$('.nav-tabs li:first').addClass('active');
});
});
try this:
$('#MyButton').click(function() {
$('.nav-tabs a:first').tab('show');
});
Related
There is multilevel menu where each <li> contains <a>. On desktop the submenu is opened with :hover and all is good.
On mobile I want to replace :hover with click on the font awesome caret-down icon click to open the submenu. However in below html the <a>
captures the touchstart.
How to capture click on icon that is inside the link and have rest of the link still clickable?
$(document).ready(function () {
$('.hover').bind('touchstart', function (e) {
e.preventDefault();
$(this).parent().toggleClass('hover_effect');
});
});
This is the menu structure:
<li class="hover">WordPress Development<i class="fa fa-caret-down hover" aria-hidden="true"></i>
<ul>
<li>Themes</li>
<li>Plugins</li>
<li class="hover">Custom Post Types<i class="fa fa-caret-down hover" aria-hidden="true"></i>
<ul>
<li class="hover">Portfolios</li>
<li class="hover">Testimonials</li>
</ul>
</li>
<li>Options</li>
</ul>
</li>
So what you need is event or function which will work not on link clicked but on your fontawesome icon. And because in yur navigation you have only one tag, you don't need to provide it id or class, just replace ".hover" to ".hover i":
`
$(document).ready(function () {
$('.hover i').bind('touchstart', function (e) {
e.preventDefault();
$(this).parent().toggleClass('hover_effect');
});
});
`
I have created a burger menu using jQuery. And I have also created another jQuery function that automatically scrolls down the page to the anchor position when a link is clicked. Now what I need the burger menu function to do is close when one of the auto_close class links is clicked.
<nav>
<img class="logo_animated" src="images/popsies.svg">
<ul id="height">
<li class="auto_close">Welcome</li>
<li class="auto_close">Menu</li>
<li class="auto_close">Opening Times</li>
<li id="mob_icons">
<i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
</li>
<li class="mob_contact">Tel: 0113 0000000</li>
<li class="mob_contact">Email: example#yahoo.co.uk</li>
</ul>
</nav>
my burger menu function:
$(document).ready(function(){
$(".burger-button").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});
Assuming that the show class reveals the burger menu, remove it if any of the a elements was clicked.
$("#height li a").click(function() {
$(".burger-button").removeClass("show");
});
since you are using toggle you can just add a reference to the .auto_close a links like so:
$(document).ready(function(){
$(".burger-button,.auto_close a").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});
the simplest way, if your burger is always open, when one of your links is clicked.
$('.auto_close').click(function(){
$(".burger-button").trigger('click')
})
else if it isnt sure the burger is always open, just remove the classes
$('.auto_close').click(function(){
$("nav").removeClass("show");
$("body").removeClass("no_scroll");
});
I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.
I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.
Here is my HTML code:
<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here
<nav class="main-menu">
<ul>
<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>
<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>
Here is the script I'm using to toggle the menu
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Here is the code for the remove/add class for animating the button.
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.
to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links
If you are using jquery anyways, then use this for the class toggling logic
$(".main-menu ul li a").click( function(){
e.preventDefault();
$(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});
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
<ul class="nav nav-pills nav-stacked" id="moduleList">
<li class="">
User</li>
<li>
Blog
</li>
</ul>
I have the above bootstrap pill in my website. The active item changes and the script execute to load the active item in the page. In some condition I don't want to change the active item and the decision will be made inside the onclick function loadModule(). How can I do that?
Remove data-toggle="pill" from your markup, then change the class of the selected 'li' to active or empty within 'loadModule'. Here's an example:
function loadModule(a) {
//your logic/////
$('#liUser').attr('class', '');
$('#liBlog').attr('class', 'active');
}
<ul class="nav nav-pills nav-stacked" id="moduleList">
<li id="liUser" class="">
User
</li>
<li id="liBlog">
Blog
</li>
</ul>
I don't know if is useful for you. Try this using jQuery:
$(document).delegate('.nav-pills li a', 'click', function () {
$('.nav-pills li').removeClass('active');
this.parent().addClass('active');
});
Then remove click and data-toggle attributes. You can add some logic inside of delegate callback.