加载页面时,我很难使<li>
类处于活动状态。这是我在特定网站上复制示例Dropdown并将其集成到我的网站中的情况。我正在使用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 & 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>
最佳答案
正如我所评论的,这是一个在列表上具有id
属性的小示例:
<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 & 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>
然后可以将以下行添加到
document.ready
函数:$("#interfaces").attr("class", "active");