Question

我很难在加载页面时让<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 &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 1

正如我评论的那样，这是一个在列表中带有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 &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>

然后您可以将以下行添加到document.ready函数：

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

Answer 2

检查一下。这也可以帮到你

只需在document.ready function

中编写以下代码即可

$('#interfaces').addClass('active');

干杯

加载页面时将<li>类更改为活动状态

2 个答案: