I have a ul element in my html..
<ul class="sidebar-menu"> /<ul>
which can have <li> elements of two kinds..
a) simple..
<li>
<a href="/Campaign/CreateCampaignUrl">
<i class="fa fa-th"></i> <span>Campaign Url</span>
<small class="label pull-right bg-green">new</small>
</a>
</li>
b) complex..
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Classify Events</span>
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu">
<li><a href="/ClassificationUI/ClassifyStandardEvent"><i class="fa fa-circle-o"></i> Standard Events</a></li>
<li><a href="/Campaign/ClassifyCampaignProperties"><i class="fa fa-circle-o"></i> Campaign Properties</a></li>
</ul>
</li>
I wish to add class attribute with value 'active' to a specific <li> element via javascript
In my javascript I have a variable my_url.
if my_url matches a href of simple <li> say.. "/Campaign/CreateCampaignUrl" then I want the <li> to look as below, the li element has class="active"..
<li class="active">
<a href="/Campaign/CreateCampaignUrl">
<i class="fa fa-th"></i> <span>Campaign Url</span>
<small class="label pull-right bg-green">new</small>
</a>
</li>
else if complex <li> matches..
<li class="treeview active">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Classify Events</span>
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu">
<li class="active"><a href="/ClassificationUI/ClassifyStandardEvent"><i class="fa fa-circle-o"></i> Standard Events</a></li>
<li><a href="/Campaign/ClassifyCampaignProperties"><i class="fa fa-circle-o"></i> Campaign Properties</a></li>
</ul>
</li>
In this case, active value attaches to class in two places..
a) the li element which has the url which matches to my_url.. in above example "/ClassificationUI/ClassifyStandardEvent".
b) the main li element which had class="treeview" has now class="treeview active"
All help is sincerely appreciated
Thanks
Aucun commentaire:
Enregistrer un commentaire