Styjun

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;

1

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

share|improve this question

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 bronze badges

add a comment | 

1

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

share|improve this question

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 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

share|improve this question

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 bronze badges

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
 console.log(e.target); // newly activated tab
 );

<a class="nav-link" data-toggle="tab" href="#profileS" role="tab" aria-selected="false">Profile</a>

share|improve this question

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 bronze badges

share|improve this question

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 bronze badges

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 bronze badges

asked Sep 19 '18 at 18:18

SteveSteve

5,8902020 gold badges8181 silver badges149149 bronze badges

2 Answers
2

active

oldest

votes

1

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

share|improve this answer

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 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 | 

0

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.

share|improve this answer

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 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
);



);

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

1

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

share|improve this answer

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 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 | 

1

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

share|improve this answer

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 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

share|improve this answer

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 bronze badges

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
 var idx = $(this).index('a[data-toggle="tab"]');
);

share|improve this answer

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 bronze badges

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 bronze badges

answered Sep 19 '18 at 18:31

ZimZim

215k5353 gold badges452452 silver badges426426 bronze badges

0

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.

share|improve this answer

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 bronze badges

add a comment | 

0

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.

share|improve this answer

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 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.

share|improve this answer

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 bronze badges

let tabIndexNumber = $('#myTab a[aria-selected="true"]').index('a[data-toggle="tab"]');

share|improve this answer

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 bronze badges

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 bronze badges

answered Mar 27 at 6:01

blackmamboblackmambo

11711 gold badge11 silver badge1313 bronze badges