FrostyPinky FrostyPinky - 3 months ago 18
ASP.NET (C#) Question

Change <li> class to active when page is loaded

I'm having a hard time to make

<li>
class to active when page is loaded. Here's my scenario I copied a sample Dropdown in a certain website to integrate it in my website. I'm using C# Asp.Net

_Layout.cshtml

<body>
<div id="header">
@Html.Partial("_HeaderPartial")
</div>
<!--SIDEBAR Navigation-->
<aside id="menu">
// The Dropdown
@Html.Partial("_SidebarPartial")

</aside>
<div id="wrapper">

@RenderBody()

<footer class="footer">
@Html.Partial("_FooterPartial")
</footer>
</div>
<div id="right-sidebar" class="animated fadeInRight">
@Html.Partial("_RightSidebarPartial")
</div>
</body>


_SidebarPartial

<ul class="nav" id="side-menu">
<li>
<a href="@Url.Action("Index", "Home")"> <span class="nav-label">Dashboard</span> </a>
</li>
<li>
<a href="@Url.Action("Analytics", "Home")"> <span class="nav-label">Analytics</span></a>
</li>
<li>
<a href="#"><span class="nav-label">Interface</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="@Url.Action("PanelDesign", "Home")">Panels design</a></li>
<li><a href="@Url.Action("Typography", "Home")">Typography</a></li>
<li><a href="@Url.Action("Buttons", "Interface")">Colors &amp; Buttons</a></li>
<li><a href="@Url.Action("Components", "Interface")">Components</a></li>
<li><a href="@Url.Action("Alerts", "Interface")">Alerts</a></li>
<li><a href="@Url.Action("Modals", "Interface")">Modals</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">App views</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="@Url.Action("Contacts", "AppViews")">Contacts</a></li>
<li><a href="@Url.Action("Projects", "AppViews")">Projects</a></li>
<li><a href="@Url.Action("ProjectDetail", "AppViews")">Project detail</a></li>
<li><a href="@Url.Action("AppPlans", "AppViews")">App plans</a></li>
<li><a href="@Url.Action("SocialBoard", "AppViews")">Social board</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">Charts</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="@Url.Action("", "")">ChartJs</a></li>
<li><a href="@Url.Action("", "")">Flot charts</a></li>
<li><a href="@Url.Action("", "")">Inline graphs</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">Box transitions</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="@Url.Action("", "")"><span class="label label-success pull-right">Start</span> Overview </a> </li>
<li><a href="@Url.Action("", "")">Columns from up</a></li>

</ul>
</li>
</ul>

Answer

As I commented, here is a small example with an id attribute on the list:

<ul class="nav" id="side-menu">
    <li id="interfaces">
        <a href="#"><span class="nav-label">Interface</span><span class="fa arrow"></span> </a>
        <ul class="nav nav-second-level">
            <li><a href="@Url.Action("PanelDesign", "Home")">Panels design</a></li>
            <li><a href="@Url.Action("Typography", "Home")">Typography</a></li>
            <li><a href="@Url.Action("Buttons", "Interface")">Colors &amp; Buttons</a></li>
            <li><a href="@Url.Action("Components", "Interface")">Components</a></li>
            <li><a href="@Url.Action("Alerts", "Interface")">Alerts</a></li>
            <li><a href="@Url.Action("Modals", "Interface")">Modals</a></li>
        </ul>
    </li>
</ul>

And then you could add the following line to the document.ready function:

$("#interfaces").attr("class", "active");