html - If statement to find a class in javascript - Stack Overflow

admin管理员组

文章数量:1289623

<div onclick="showCustomerResultsTable();"
 class="csq-tab ui-state-default ui-corner-top"
 id="customers-tab">Customers</div>  

<div onclick="showParcelJourneySummary();"
 class="csq-tab ui-state-default ui-corner-top ui-state-active"
 id="order-journey-summary-tab">Status History</div>

Using javascript how can I check which one of these have ui-state-active, because I need an if statement to check whether the ui-state-active is activated on status history and do something.

<div onclick="showCustomerResultsTable();"
 class="csq-tab ui-state-default ui-corner-top"
 id="customers-tab">Customers</div>  

<div onclick="showParcelJourneySummary();"
 class="csq-tab ui-state-default ui-corner-top ui-state-active"
 id="order-journey-summary-tab">Status History</div>

Using javascript how can I check which one of these have ui-state-active, because I need an if statement to check whether the ui-state-active is activated on status history and do something.

• javascript
• html

Share Improve this question Follow edited Mar 6, 2012 at 15:59 Mike Samuel 121k3030 gold badges227227 silver badges252252 bronze badges asked Mar 6, 2012 at 15:49 ahmetahmet 5,0051111 gold badges4040 silver badges6464 bronze badges 3

• 2 Are you willing/able to use a Javascript framework such as jQuery? – Anthony Grist Commented Mar 6, 2012 at 15:51
• Yes not sure which version i have though – ahmet Commented Mar 6, 2012 at 15:53
• 2 From the class names, I gather that you're already using jQuery UI. jQuery should already be at your disposal... No? – Ateş Göral Commented Mar 6, 2012 at 15:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

var statusHistory = document.getElementById('order-journey-summary-tab');

if(statusHistory.classList.contains('ui-state-active')) {
    // do stuff
}

or if you have jQuery

if($('#order-journey-summary-tab').hasClass('ui-state-active')) {
    // do stuff
}

This can easily be checked with the new HTML5 classList API:

document.getElementById('customers-tab').classList.contains('ui-state-active');
// Will return true if element has class

Otherwise, you'll have to use the old way:

document.getElementById('customers-tab').className.indexOf('ui-state-active') != -1;
// Will return true if element has class

I would remend using the hasClass() property in jQuery though!

You could use jQuery's hasClass().

Otherwise you need to check the className property of the element w/ plain ol' JavaScript.

本文标签： htmlIf statement to find a class in javascriptStack Overflow