Using JQuery I'd like to get the index of the current li that I'm on when I click the button in the tabpanel residing in this list of BootStrap tabs.
<ul id="mytabs" class="nav nav-pills nav-wizard pill-font"
role="tablist" data-tabs="tabs">
<li role="presentation" class="active"><a href="#start"
data-toggle="tab">Before We Start</a></li>
<li role="presentation"><a href="#setup" aria-controls="setup"
role="tab">Setup</a></li>
<li role="presentation"><a href="#signup" aria-controls="Signing Up"
role="tab">Signing Up</a></li>
<li role="presentation"><a href="#speed" role="tab">Shipping Speeds</a</li>
<li role="presentation">Fulfillment</li>
<li role="presentation"><a href="#product"
role="tab">Products</a></li>
</ul>
I'm going to be using a counter in the button within each tabpanel so I can go forward and back. This is my JQuery without the counter..
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
$('#mytabs li:eq(2) a').tab('show');
});
});
Right now it just has the index 2 but if I can find the index of the current li I'll be able to add and subtract from it to get the li I want.
I tried with this but that just returns the index of the button, which isn't what I want.
Thanks everyone, a mish mash of everyone's answer turned into this:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $(this).parent().index();
var length = $('#mytabs li a').length
alert(length);
index=index+1;
$('#mytabs li:eq('+index+') a').tab('show');
});
});
Try this:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $(this).parent().index();
$('#mytabs li:eq(index) a').tab('show');
});
});
You can use .index to get de index of the element what you want in an array or list. It will be return the position or -1 (if it fails finding the element/value).
You can use it like this:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $('#mytabs li').index($(this));
if(index > -1){
$('#mytabs li:eq('+ index +') a').tab('show');
}
});
});
If you want to use "this", I can show you how:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var element = $(this);
});
});
If you want to add a class to the element you can use element.addClass("yourClass") to get it.
I wish it that help to you.
P.D: I recommend change your jQuery selector from :button to #mytabs li, so you can get the exact element that you has been click, or you can use element.closest("li") to get the parent li.
This should work:
$(function() {
$("li").click(function() {
var li = $(this);
console.log( li.parent().find("li").index(li));
});
});
Returns you the index of the li you clicked.
Related
I have the following HTML menu:
<div class="nav">
<ul>
<li class="first">Home</li>
<li>Something</li>
<li>Else</li>
<li class="last">Random</li>
</ul>
<ul style="float:right;">
<li class="first last">News</li>
</ul>
</div>
</div>
And then I have this code:
jQuery(function($){
var current = location.pathname;
$('.nav ul li a').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');
}
})
})
The code is working great, but it has a problem. For example, if I see the Home page (www.example.com) then all of the menu links receives the active class. Another problem would be that it works great for www.example.com/something but it doesn't keep it active if I go to www.example.com/something/1 etc. Any idea how to fix this? Thanks in advance!
For home page add extra class 'default' in list like.
<li class="first default">Home</li>
jquery code.
jQuery(function($){
var current = location.pathname;
console.log(current);
//remove the active class from list item.
$('.nav ul li a').removeClass('active');
if(current != '/'){
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
$this.addClass('active');
}
})
}else{
console.log('home');
$('.default a').addClass('active');
}
})
Use the below jQuery code to add active class:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$(".nav ul li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
By using indexOf(), you are checking if the link's target is the same the current location.
What you want is not "the same URL" but "the same pattern", so I would tend to use a regular expression :
let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
$(this).addClass("active");
}
Note that this would force you to create a separate solution for your link to the main page, else it would always be active.
Following is my HTML,
<div class="container">
<ul class="navbar">
<li class="nb-link"><a>Home</a></li>
<li class="dropdown">
<a>CBSE</a>
<ul class="dropdown-menu">
<li>10th Standard</li>
<li>12th Standard</li>
</ul>
</li>
<li class="dropdown">
<a>Engineering</a>
<ul class="dropdown-menu">
<li>JEE - Main</li>
<li>JEE - Advanced</li>
</ul>
</li>
</ul>
I have 2 dropdowns . When I click one, it comes down. But when I click another, even that comes down without closing the previous one . This creates an overlap. The way I'm handling this using JS is as follows
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$('.navbar').$this.children('.dropdown-menu').removeClass('open');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').addClass('open');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
How can I achieve a functionality using JS such that the previous dropdown closes when I click a new dropdown ? Also, the dropdowns should close when anywhere on the page is clicked ?
can try this
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$('.dropdown').not($this).removeClass('active')
$('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
$this.toggleClass('active');
$this.find('.dropdown-menu').toggleClass('open');
});
});
Working Demo
this is a function you can use if selectors is not target
// function for if selectors not target
function actionwindowclick(e , selector , action){
if (!$(selector).is(e.target) // if the target of the click isn't the container...
&& $(selector).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
and you can use it in window click event like this
$(window).on('click', function(e){
actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
$('.dropdown').removeClass('active')
$('.dropdown-menu').removeClass('open');
});
});
Working Demo
Note: I think you may need to
event.stopPropagation()
while you trying to click on .dropdown-menu itself
$('.dropdown-menu').click(function(e) {
e.stopPropagation()
});
Try:
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$this.children('.dropdown-menu').toggleClass('open');
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
I have menu tab like this:
<li><a id="current" href="Index.aspx">A</a></li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
And the CSS is like this:
ul#minitabs a#current {
border-color: #EEACAC;
color:#AC2B53
}
How can I change the id="current" for the selected one, and not to be constant to the first one.
This code will set id to current link based on what page is open. I think this is what you meant.
window.onload = function(){
var url = window.location.href;
url = url.split('/').pop();
document.querySelector('a[href='+url+']').id="current";
};
Improve this code. and use to change your classes or etc.
$(document).ready(function(){
$("a").click(function(){
$(this).addClass('current');
console.log($(this).attr('class'));
});
});
But I believe in CSS solution in you case.
a:hover{attr:attr}
Using jQuery you can keep up with the tab the user is clicking by doing:
$('li > a').on('click', function (e) {
if (!$(this).hasClass('current')) {
$('li > a').removeClass('current');
$(this).addClass('current');
}
e.preventDefault();
});
We are checking to if the current a tag doesn't have the class 'current'.
Here is a fiddle: http://jsfiddle.net/3ebc7kx2/
I have list:
<ul class="nav">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
I am trying to get the index of the <li> I just clicked.
What I tried is something with index() but it doesn't work as expected.
Am I missing something?
Here is my code:
console.log($('.nav li').index());
Clicking on the 2nd <li> should return "2" (or 1, if the index is starting with 0)
This here is my click-function:
$('.nav .hasChild > a').click(function(e) {
console.log($('.nav li').index());
....
});
The "hasChild"-class is not important in my case
Try this:
$('.nav .hasChild > a').click(function() {
var indexVal = $(this).closest('li').index();
console.log(indexVal);
});
Try this-
$('.nav .hasChild > a').click(function(e) {
console.log($(this).parent("li").index());//this holds the current element reference which is clicked
}
Perhaps I am missing something with the extra classes but surely it is as simple as;
$('.nav li').click(function() {
console.log($(this).index());
});
I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)
I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}
$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag
This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});