引导程序和 ASP.NET 菜单答案

【问题标题】：Bootstrap and ASP.NET Menu引导程序和 ASP.NET 菜单
【发布时间】：2014-09-08 22:31:57
【问题描述】：

我正在我的 ASP.NET Web 应用程序中创建一个导航栏，我正在使用 bootstrap-3.1.1。特别是我正在尝试利用他们的导航选项卡，如here 所示。我对这个问题做了很多研究，过去我也没有成功处理过这种情况。我使用this 链接作为参考，因为它完成了非常相似的任务，但我的应用程序显示了意外的结果。我意识到之前的链接是针对 Twitter Bootstrap 的，但我相信即使不完全相同，行为也会相似。

我有一个 ASP 菜单，如下所示，它以所需的方式显示我添加的项目。我已经用适当的类设置了StaticMenuStyle 和StaticSelectedStyle。我还尝试了这些类的许多不同排列，但没有成功。

这是我的 ASP.net 代码：

<asp:Menu ID="NavBar" runat="server" role="tablist"
    StaticSubMenuIndent="16px" RenderingMode="List" 
    CssClass="nav nav-tabs nav-justified" Orientation="Horizontal">
    <Items>
        <asp:MenuItem Text="Home" Value="Home" Selected="True"></asp:MenuItem>
        <asp:MenuItem Text="Generation" Value="Generation"></asp:MenuItem>
        <asp:MenuItem Text="Loads" Value="Loads"></asp:MenuItem>
        <asp:MenuItem Text="Tie Line Metering" Value="Tie Line Metering"></asp:MenuItem>
        <asp:MenuItem Text="About" Value="About"></asp:MenuItem>
    </Items>
    <StaticMenuStyle CssClass="nav nav-tabs nav-justified" />
    <StaticSelectedStyle CssClass="active" />
</asp:Menu>

我包含所有正确的 <link> 和 <script> 标签，以便引导程序工作，我知道这一点，因为我可以创建导航菜单的基本版本，并且它运行良好。唯一不起作用的是“活动”选项卡正在更改。没有 ASP 菜单的列表的准系统代码如下：

<ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="active"><a>Home</a></li>
    <li><a>About</a></li>
</ul>

唯一不适用于<asp:Menu> 的是正确的“活动”样式CSS 类未应用于<li> 项目。相反，在按下按钮时，“选定”类将应用于 <li> 项目中的锚 (<a>) 标记。此处显示了所述行为，其中选择了“主页”项目。此外，在 chrome 中使用开发人员工具时，我可以手动将 <li> 项目添加到“活动”CSS 类中，它的行为正常。

我还有两行 jQuery 正在删除错误的类属性到菜单中，这些属性会导致 ASP 自动插入不需要的结果。它们是：

<script type="text/javascript">
    $("#NavBar ul, #NavBar ul li, #NavBar ul li a").removeClass('level1 static');
    $("#NavBar, #NavBar ul, #NavBar ul li").removeAttr('style');
</script>

很抱歉这篇冗长的帖子，但我希望我已经很好地表达了我的问题。

【问题讨论】：

标签： jquery css asp.net twitter-bootstrap-3

【解决方案1】：

我认为您可以这样做将“选定”类添加到父 li 元素：

$('#NavBar ul li a.selected').parent().addClass('selected');

要从 a 元素中删除“选定”类，请添加为第 2 行：

$('#NavBar ul li a.selected').removeClass('selected');

【讨论】：

我只是在自己的项目中使用了这个。确切的代码行是： $('#NavigationMenu ul li a.selected').parent().addClass('active'); $('#NavigationMenu ul li a.selected').removeClass('selected');

【解决方案2】：

我遇到了同样的问题并这样解决：

$(function () {
    var menu = $('#NavBar');

    // Fixes for the aspMenu so that it will work with our bootstrap implementation
    menu.find('ul')[0].style = ''; // clear the asp menu's inline styling
    menu.find('ul')[0].className = menu[0].className; // The class name needs to be on the first ul element not the container div
    menu.find('li.static').removeClass('static'); // remove the extraneous class


    menu.find('li.has-popup').addClass('dropdown') //  add the dropdown class to the popup menus
        .find('> ul').addClass('dropdown-menu').attr('style', 'display: none');  // add the appropriate class, and overwrite the extraneous inline styling

    // No styling is required on the container div
    menu[0].style = '';
    menu[0].className = '';
});

希望有帮助:)

【讨论】：