Bootstrap 4 tabs: get index number of clicked tab?Validate decimal numbers in JavaScript - IsNumeric()How do I detect a click outside an element?How do you get a timestamp in JavaScript?How to get the children of the $(this) selector?Get current URL with jQuery?How to insert an item into an array at a specific index (JavaScript)?Get the current URL with JavaScript?Get selected text from a drop-down list (select box) using jQueryGet the size of the screen, current web page and browser windowOpen a URL in a new tab (and not a new window) using JavaScript
What can make Linux unresponsive for minutes when browsing certain websites?
Where is the rule for moving slowly when searching for traps that’s referenced by Dungeon Delver?
How do I get the =LEFT function in excel, to also take the number zero as the first number?
How can I tell if a flight itinerary is fake
Short story about a teenager who has his brain replaced with a microchip (Psychological Horror)
In what sense are the equations of motion conserved by symmetries?
Is it true that control+alt+delete only became a thing because IBM would not build Bill Gates a computer with a task manager button?
How do I say "Outdoor Pre-show"
Is TEXT to VARCHAR(MAX) an implicit conversion?
Should I take out a personal loan to pay off credit card debt?
Finish the Mastermind
"How do you solve a problem like Maria?"
Was there ever a difference between 'volo' and 'volo'?
How quickly could a country build a tall concrete wall around a city?
Why should I "believe in" weak solutions to PDEs?
Is it double speak?
What are good ways to improve as a writer other than writing courses?
Is it allowed and safe to carry a passenger / non-pilot in the front seat of a small general aviation airplane?
Validation and verification of mathematical models
Whats the name of this projection?
Colleagues speaking another language and it impacts work
Casting Goblin Matron with Plague Engineer on the battlefield
Is alignment needed after replacing upper control arms?
Erratic behavior by an internal employee against an external employee
Bootstrap 4 tabs: get index number of clicked tab?
Validate decimal numbers in JavaScript - IsNumeric()How do I detect a click outside an element?How do you get a timestamp in JavaScript?How to get the children of the $(this) selector?Get current URL with jQuery?How to insert an item into an array at a specific index (JavaScript)?Get the current URL with JavaScript?Get selected text from a drop-down list (select box) using jQueryGet the size of the screen, current web page and browser windowOpen a URL in a new tab (and not a new window) using JavaScript
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am trying to figure out which tab the user clicked on by its index, e.g. they clicked on the second of five tabs.
I can get the total number of tabs by adding an ID to the nav:
this.numTabs = $('#myTabset').children().length;
from the Bootstrap 4 docs, I can get the clicked tab:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
console.log(e.target); // newly activated tab
);
Which logs:
<a class="nav-link" data-toggle="tab" href="#profileS" role="tab" aria-selected="false">Profile</a>
So I can get all aspects of the clicked tab, but how to get which "number" tab it is?
javascript jquery bootstrap-4
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
add a comment |
I am trying to figure out which tab the user clicked on by its index, e.g. they clicked on the second of five tabs.
I can get the total number of tabs by adding an ID to the nav:
this.numTabs = $('#myTabset').children().length;
from the Bootstrap 4 docs, I can get the clicked tab:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
console.log(e.target); // newly activated tab
);
Which logs:
<a class="nav-link" data-toggle="tab" href="#profileS" role="tab" aria-selected="false">Profile</a>
So I can get all aspects of the clicked tab, but how to get which "number" tab it is?
javascript jquery bootstrap-4
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
add a comment |
I am trying to figure out which tab the user clicked on by its index, e.g. they clicked on the second of five tabs.
I can get the total number of tabs by adding an ID to the nav:
this.numTabs = $('#myTabset').children().length;
from the Bootstrap 4 docs, I can get the clicked tab:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
console.log(e.target); // newly activated tab
);
Which logs:
<a class="nav-link" data-toggle="tab" href="#profileS" role="tab" aria-selected="false">Profile</a>
So I can get all aspects of the clicked tab, but how to get which "number" tab it is?
javascript jquery bootstrap-4
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
I am trying to figure out which tab the user clicked on by its index, e.g. they clicked on the second of five tabs.
I can get the total number of tabs by adding an ID to the nav:
this.numTabs = $('#myTabset').children().length;
from the Bootstrap 4 docs, I can get the clicked tab:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
console.log(e.target); // newly activated tab
);
Which logs:
<a class="nav-link" data-toggle="tab" href="#profileS" role="tab" aria-selected="false">Profile</a>
So I can get all aspects of the clicked tab, but how to get which "number" tab it is?
javascript jquery bootstrap-4
javascript jquery bootstrap-4
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
asked Sep 19 '18 at 18:18
SteveSteve
5,89020 gold badges81 silver badges149 bronze badges
5,89020 gold badges81 silver badges149 bronze badges
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Use the jQuery .index() method like this...
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
var idx = $(this).index('a[data-toggle="tab"]');
);
Demo: https://www.codeply.com/go/GeNHX340fc
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
1
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
add a comment |
If you want to get the index of the currently selected tab, do the below
let tabIndexNumber = $('#myTab a[aria-selected="true"]').index('a[data-toggle="tab"]');
The id #myTab is the id of the bootstrap tab. It produces a zero-based numeric value, zero being the first tab.
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52411988%2fbootstrap-4-tabs-get-index-number-of-clicked-tab%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use the jQuery .index() method like this...
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
var idx = $(this).index('a[data-toggle="tab"]');
);
Demo: https://www.codeply.com/go/GeNHX340fc
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
1
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
add a comment |
Use the jQuery .index() method like this...
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
var idx = $(this).index('a[data-toggle="tab"]');
);
Demo: https://www.codeply.com/go/GeNHX340fc
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
1
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
add a comment |
Use the jQuery .index() method like this...
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
var idx = $(this).index('a[data-toggle="tab"]');
);
Demo: https://www.codeply.com/go/GeNHX340fc
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
Use the jQuery .index() method like this...
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
var idx = $(this).index('a[data-toggle="tab"]');
);
Demo: https://www.codeply.com/go/GeNHX340fc
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
answered Sep 19 '18 at 18:31
ZimZim
215k53 gold badges452 silver badges426 bronze badges
215k53 gold badges452 silver badges426 bronze badges
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
1
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
add a comment |
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
1
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
I need to scope it to this particular tabset, as there are others on the page I'm not concerned with (so, for example, I'm getting "13" for the second tab)
– Steve
Sep 19 '18 at 18:40
1
1
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
Then use a parent selector within the index() that's specific to the tabset.
– Zim
Sep 19 '18 at 18:51
add a comment |
If you want to get the index of the currently selected tab, do the below
let tabIndexNumber = $('#myTab a[aria-selected="true"]').index('a[data-toggle="tab"]');
The id #myTab is the id of the bootstrap tab. It produces a zero-based numeric value, zero being the first tab.
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
add a comment |
If you want to get the index of the currently selected tab, do the below
let tabIndexNumber = $('#myTab a[aria-selected="true"]').index('a[data-toggle="tab"]');
The id #myTab is the id of the bootstrap tab. It produces a zero-based numeric value, zero being the first tab.
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
add a comment |
If you want to get the index of the currently selected tab, do the below
let tabIndexNumber = $('#myTab a[aria-selected="true"]').index('a[data-toggle="tab"]');
The id #myTab is the id of the bootstrap tab. It produces a zero-based numeric value, zero being the first tab.
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
If you want to get the index of the currently selected tab, do the below
let tabIndexNumber = $('#myTab a[aria-selected="true"]').index('a[data-toggle="tab"]');
The id #myTab is the id of the bootstrap tab. It produces a zero-based numeric value, zero being the first tab.
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
answered Mar 27 at 6:01
blackmamboblackmambo
1171 gold badge1 silver badge13 bronze badges
1171 gold badge1 silver badge13 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52411988%2fbootstrap-4-tabs-get-index-number-of-clicked-tab%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
