Bootstrap和ASP.NET菜单

Question

我在ASP.NET Web应用程序中创建了一个导航栏,我正在使用bootstrap-3.1.1.特别是我想利用他们的资产净值标签如图所示这里.我在这个问题上做了很多研究,过去这种情况我也没有成功.我使用此链接作为参考,因为它完成了一个非常类似的任务,但我的应用程序显示意外的结果.我意识到之前的链接是针对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>项目.相反,在按下按钮时,"selected"类将应用于项目中的anchor(<a>)标记<li>.此处显示所述行为,并选择"主页"项.此外,在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>

对于冗长的帖子感到抱歉,但我希望我能很好地表达我的问题.

Answer 1

我认为你可以这样做来将“selected”类添加到父 li 元素中：

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

并从 a 元素中删除“选定”类，添加为第二行：

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