Access data-toggle value with jquery

Question

I have to use jQuery for a project and I am trying to get the value of a selected tab. This is the HTML:

<ul class="nav nav-tabs umb-nav-tabs" ng-if="tabs" model="tabs"><li class="dropdown pull-right tabdrop hide" style="display: list-item;"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>
  <!-- ngRepeat: tab in model --><li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab="" class="ng-scope active" style="display: list-item;">
    <a data-toggle="tab" href="#tab1" class="ng-binding">Home</a>
  </li><li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab="" class="ng-scope" style="display: list-item;">
    <a data-toggle="tab" href="#tab2" class="ng-binding">Swiss Home</a>
  </li><li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab="" class="ng-scope" style="display: list-item;">
    <a data-toggle="tab" href="#tab3" class="ng-binding">Brazil Home</a>
  </li><li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab="" class="ng-scope" style="display: list-item;">
    <a data-toggle="tab" href="#tab4" class="ng-binding">Get Started</a>
  </li>
</ul>

I want the HTML of the active tab:

<li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab="" class="ng-scope active" style="display: list-item;">
    <a data-toggle="tab" href="#tab1" class="ng-binding">Home</a>
  </li>

Where it says Home, so I can fire some code based on that. Any help would be appreciated.

Kenneth · Accepted Answer · 2016-05-27 11:33:41Z

1

You can get that value using the following CSS selector and then calling the HTML-method on it:

var theHtml = $("li.active").html();

answered May 27, 2016 at 11:33

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nick gowdy Over a year ago

Thanks, this was exactly what I needed.

d4rty · Accepted Answer · 2016-05-27 11:32:46Z

1

You can try something like this. But I didn't test it. It is just an approach.

Take a look at the each function of JQuery documentation.

$( ".ng-scope" ).each(function() {
  if($(this).hasClass("active")){
    var result = $(this).html();
  }
});

answered May 27, 2016 at 11:32

d4rty

4,2585 gold badges39 silver badges76 bronze badges

Comments

dane · Accepted Answer · 2016-05-27 11:33:29Z

1

You didn't post any info on what event you wanted to fire that on but if it is an onClick you can do something like:

$(".nav a").click(function() {
    if($(this).hasClass('active')){
        //do what you want with it here
    }
}

answered May 27, 2016 at 11:33

dane

6296 silver badges16 bronze badges

Collectives™ on Stack Overflow

Access data-toggle value with jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related