將類添加到基於數據的元素-html使用javascript

我想將類'activeTab'追加到文檔準備好的標記上。我需要通過它的data-html選擇標籤，但我不知道如何做到這一點。將類添加到基於數據的元素-html使用javascript

因此，這是如何目前HTML載荷：

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

我想「activeTab」類添加到data-html="all"元素。

來源

2016-08-08 user3005003

您可以使用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>

來源

2016-08-08 09:42:17

使用$（「tabbedGroupings_tabs> [數據HTML = '全部']」）。addClass（ 'activeTab'）避免遍歷整個DOM並且是更高效的。 –

@NicolasHenneaux代碼更新，謝謝:) –

將類添加到基於數據的元素-html使用javascript

回答

相關問題