Add class "active" to dropdown menu by jquery

Question

I am trying to add "active" class by jQuery because that code from a aspx master file. I know PHP but no ASAP.

When anyone go to submenu page like Technical-Info.aspx, End-Device-Info.aspx page then need addClass on parent li(<li class="active"><a href="OverView.aspx" title="Overview">OverView</a> instead of <li><a href="OverView.aspx" title="Overview">OverView</a>).

Code-

<ol id="menu">
         <li><a href="Default.aspx" title="Home Page" style="color:#FFF">Home</a>        
        <li><a href="OverView.aspx" title="Overview">OverView</a>  

          <!-- sub menu -->
          <ol>     
            <li><a href="Technical-Info.aspx" title="Technical Info">Technical Info</a></li>
            <li><a href="End-Device-Info.aspx" title="End Device Info">End Device Info</a></li>
          </ol>
        </li><!-- end sub menu -->

        <li><a href="Register.aspx">Register To Service</a></li>
        <li><a href="Rates.aspx">Rates</a></li>

        <li><a href="#">Support</a>

          <!-- sub menu -->
          <ol>     
            <li><a href="FAQ.aspx" title="FAQ">FAQ</a></li>
            <li><a href="TOS.aspx" title="TOS">Terms Of Service</a></li>
            <li><a href="Contact_Us.aspx" title="Order the service">Contact Us</a></li>
          </ol>
        </li><!-- end sub menu -->

         <li><a href="skype:name?call" title="Call us on Skype"><img src="img/callme_small4.png" width="85px" height="85px"; /></a></li>

</ol>

To clarify: you have a number of pages. The menu is on each of them, with identical HTML, but you want to do conditional styling for the menu entry that matches the current page? — S McCrohan
– S McCrohan, Commented Jul 10, 2014 at 1:10

Maksym Kozlenko · Accepted Answer · 2014-07-10 01:11:32Z

1

You can use following:

$("li[title=FAQ]").addClass("active");

answered Jul 10, 2014 at 1:11

Maksym Kozlenko

10.4k2 gold badges69 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Peterson · Accepted Answer · 2014-07-10 02:39:35Z

One alternative is to to these changes in the server side. To do so, you would have to transform each HTML element into a server-side control. To do so, simply put a tag runat="server" in each of them, and put an ID to identify them. For instance:

<li><a href="OverView.aspx" title="Overview">OverView</a></li>

becomes:

<li id="overviewMenu" runat="server"><a href="OverView.aspx" title="Overview">OverView</a></li>.

Then on the server side, use to follow pseudo algorithm:

Retrieve all menus and mark them as not 'active".
Select the menu to be marked and set it as 'active'.

Here are a few methods of ASP.NET which will be useful:

In order to get your HTML controller server-side by id, use the following method: HtmlControl control = (HtmlControl) this.FindControl("controllerId");, where the controllerId is your server side id. You can use the HtmlControl generic type to cast all your HTML controls. You will need the package System.Web.UI.HtmlControls for the HtmlControl.
To add the active class use the following command: control.Attributes.Add("class", "active");. To remove, use this one: control.Attributes.Remove("class");;

Collectives™ on Stack Overflow

Add class "active" to dropdown menu by jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related