javacriptを使用してdata-htmlに基づいて要素にクラスを追加しています

Question

'activeTab'クラスをドキュメント上のタグに追加したいと考えています。私はそれをデータHTMLでタグを選択する必要がありますが、私はこれを行う方法がわかりません。

だから、これはどのようにHTMLのロード現在：私はdata-html="all"要素に「activeTab」クラスを追加したいと思い

<ul class="tabbedGroupings_tabs"> 
    <li class="tg_tab" data-html="academicprofessionalanddevelopment">Academic, Professional and Development</li> 
    <li class="tg_tab" data-html="cultural">Cultural</li> 
    <li class="tg_tab" data-html="physicalactivityandperformance">Physical Activity and Performance</li> 
    <li class="tg_tab" data-html="politicsreligionandcampaigning">Politics, Religion and Campaigning</li> 
    <li class="tg_tab" data-html="society">Society</li> 
    <li class="tg_tab" data-html="specialinterest">Special Interest</li> 
    <li class="tg_tab" data-html="all">All</li> 
</ul> 

。

Answer 1

jQuery属性セレクタを使用できます。 $("[attribute]")。これは、特定の値と正確に等しい値を持つ指定された属性を持つ要素を選択します。 $を使用attribute-equals-selector

$(document).ready(function() { 
 
    $(".tabbedGroupings_tabs > [data-html='all']").addClass('activeTab'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tabbedGroupings_tabs"> 
 
    <li class="tg_tab" data-html="academicprofessionalanddevelopment">Academic, Professional and Development</li> 
 
    <li class="tg_tab" data-html="cultural">Cultural</li> 
 
    <li class="tg_tab" data-html="physicalactivityandperformance">Physical Activity and Performance</li> 
 
    <li class="tg_tab" data-html="politicsreligionandcampaigning">Politics, Religion and Campaigning</li> 
 
    <li class="tg_tab" data-html="society">Society</li> 
 
    <li class="tg_tab" data-html="specialinterest">Special Interest</li> 
 
    <li class="tg_tab" data-html="all">All</li> 
 
</ul>