Question

我在asp.net应用程序中的Masterpages中使用bootstrap，我正在应用这种技术，但多次失败以实现我想要的。以下是HTML：

<ul class="nav nav-pills">
    <li class="active"><a href="Default.aspx"  id="home" runat="server" target="_blank">Home</a></li>
    <li><a href="login.aspx" id="loginLink" runat="server">Login</a></li> 
    <li><a  href="signup.aspx" id="signUpLink" runat="server">Sign up</a></li>
    <li><a href="products.aspx" id="productsLink" runat="server">Products</a></li>
    <li><a href="AboutUs.aspx" id="aboutUsLink" runat="server">About Us</a></li>
    <li><a href="ContactUs.aspx" id="contactUsLink" runat="server">Contact Us</a></li>
</ul>

这是脚本：

$(function () {
     $('ul li a').on('click', function () {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

问题是每当我点击任何链接时，“活动”类仍会添加到该链接但是当页面完成加载“活动”类被设置为“主页”页面??? Plzz帮帮我

Answer 1

您无法使用点击事件，因为当您点击它时，您将打开不同的页面。

尝试为每个<li>元素提供文件名的ID减去文件扩展名。（链接到index.asp应为id =＆＃34; index＆＃34;）

当页面打开时，.NET会将应该突出显示的id传递给jQuery。

然后jQuery将使用.NET填充的id将类分配给正确的<li>。列表应如下所示：

<ul class="nav nav-pills">
    <li id="Default"><a href="Default.aspx" runat="server" target="_blank">Home</a></li>
    <li id="login"><a href="login.aspx" runat="server">Login</a></li> 
    <li id="signup"><a  href="signup.aspx" runat="server">Sign up</a</li>
    <li id="products"><a href="products.aspx" runat="server">Products</a></li>
    <li id="aboutUs"><a href="AboutUs.aspx" runat="server">About Us</a></li>
    <li id="contactUs"><a href="ContactUs.aspx" runat="server">Contact Us</a></li>
</ul>

这是javascript：

<script type="text/javascript">
    $('#<%= System.IO.Path.GetFileNameWithoutExtension(System.Web.HttpContext.Current.Request.Url.AbsolutePath).ToLower()%>').addClass( "active" );
</script>

我应该如何保持课堂活动＆＃34;添加到jquery中的选定链接？

1 个答案: