jeudi 23 juin 2016

adding a class attrib to html element based on certain condition javascript

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