CODEWITHSUNDEEP
javascriptjquery
nick gowdy
nick gowdy

Reputation: 6511

Access data-toggle value with jquery

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.

Upvotes: 1

Views: 2123

Answers (3)

Kenneth
Kenneth

Reputation: 28737

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

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

Upvotes: 1

dane
dane

Reputation: 631

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
    }
}

Upvotes: 1

d4rty
d4rty

Reputation: 4188

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();
  }
});

Upvotes: 1

Related Questions