appending a class to an element based on its data-html using javascript -
i want append class 'activetab' tag on document ready. need select tag it's data-html i'm not sure how this.
so how html loads currently:
<ul class="tabbedgroupings_tabs"> <li class="tg_tab" data-html="academicprofessionalanddevelopment">academic, professional , development</li> <li class="tg_tab" data-html="cultural">cultural</li> <li class="tg_tab" data-html="physicalactivityandperformance">physical activity , performance</li> <li class="tg_tab" data-html="politicsreligionandcampaigning">politics, religion , 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> i add 'activetab' class data-html="all" element.
you can use jquery attribute selector. $("[attribute]") , selects elements have specified attribute value equal value.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 , development</li> <li class="tg_tab" data-html="cultural">cultural</li> <li class="tg_tab" data-html="physicalactivityandperformance">physical activity , performance</li> <li class="tg_tab" data-html="politicsreligionandcampaigning">politics, religion , 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>
Comments
Post a Comment