Extract data-atribute from Current Active Tab

Question

How is it possible to extract the tabid data-attribute from the current active tab:

HTML SAMPLE:

<button class="tab-page tab-active" data-tabid="Tab1">Tab1</button>

Can you please expand your question by explaining "`variable through class Name`". — Iceman, Jul 08 '16 at 06:43
so you want to select this dom element and get it as a javascript element? — Iceman, Jul 08 '16 at 06:46
Possible dupliacte of protected question: http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute — Iceman, Jul 08 '16 at 06:51
Judging from the title, the html code given has to be very incomplete, where is the active tab mentioned? Please take care... — Theodore K., Jul 08 '16 at 06:53

score 0 · Answer 1 · answered Jul 08 '16 at 06:47

0

You can use document.getElementsByClassName("tab-active")

function myFunc() {
  alert(document.getElementsByClassName("tab-active")[0].innerHTML);
  
  }

<button class="tab-page tab-active" data-tabid="Tab1" onclick="myFunc()">Tab1</button>

answered Jul 08 '16 at 06:47

Rohit

1,751
1
7
15

score 0 · Answer 2 · answered Jul 08 '16 at 06:47

0

In pure Javascript

document.getElementsByClassName("tab-page tab-active")[0].getAttribute("data-tabid"));

answered Jul 08 '16 at 06:47

Canu667

175
1
5

score 0 · Answer 3 · answered Jul 08 '16 at 06:49

Use querySelector to get the element and get tabid value from dataset property.

var activeTab=document.querySelector('.tab-page.tab-active').dataset['tabid'];

console.log(activeTab);

<button class="tab-page tab-active" data-tabid="Tab1">Tab1</button>

score 0 · Answer 4 · answered Jul 08 '16 at 06:49

It's safer to take into consideration both classes (tab-page and tab-active), so you'd better use document.getElementsByClassName('tab-page tab-active');

var x = document.getElementsByClassName('tab-page tab-active');
var val = x[0].getAttribute('data-tabid');
alert(val);//or do whatever you want with val

 <button class="tab-page tab-active" data-tabid="Tab1">Tab1</button>

Angelos Chalaris · Answer 5 · 2016-07-08T07:02:30.600

0

As an alternative to the pure javascript solutions presented, you can use jQuery's class selector as follows:

$('.tab-page.tab-active').click(function(){$(this).text('Hello');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tab-page tab-active" data-tabid="Tab1">Tab1</button>

edited Jul 08 '16 at 07:02

answered Jul 08 '16 at 06:49

Angelos Chalaris

6,278
8
49
73

Iceman · Accepted Answer · 2016-07-08T08:31:08.253

0

Vanilla Javascript:

Docs: .getElementsByClassName() & .getAttribute()

document.getElementsByClassName("tab-active")[0].getAttribute("data-tabid"));

jQuery:

Docs: .attr()

$(".tab-active").attr("data-tabid")

jQuery >= 1.4.3

Docs: .data()

$(".tab-active").data("tabid")

edited Jul 08 '16 at 08:31

answered Jul 08 '16 at 06:49

Iceman

5,800
1
22
34

Extract data-atribute from Current Active Tab

6 Answers6