Fatal编程技术网
  • asp.net/
  • Asp.net 当用户选择导航栏项目时，如何将其设置为活动？

Asp.net 当用户选择导航栏项目时，如何将其设置为活动？

asp.net twitter-bootstrap

Asp.net 当用户选择导航栏项目时，如何将其设置为活动？,asp.net,twitter-bootstrap,master-pages,navbar,Asp.net,Twitter Bootstrap,Master Pages,Navbar,我是一名新的ASP.NET Web表单开发人员，正在尝试将Twitter引导应用于母版页。当用户选择导航栏项目时，我正在努力将其设置为活动状态。我创建了一个简单的母版页，介绍了如何在ASP.NET中使用Twitter引导 以下是我的母版页的代码： <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <!DOCTYPE html> <html xmlns

我是一名新的ASP.NET Web表单开发人员，正在尝试将Twitter引导应用于母版页。当用户选择导航栏项目时，我正在努力将其设置为活动状态。我创建了一个简单的母版页，介绍了如何在ASP.NET中使用Twitter引导

以下是我的母版页的代码：

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="container">
            <div class="row-fluid">
                <div class="span12">
                    <div class="page-header">
                        <h1>Hello... My First Website with Twitter Bootstrap</h1>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span3">
                    <ul class="nav nav-list">
                        <li class="nav-header">Navigation</li>
                        <li class="active"><a href="Default.aspx">ASP.NET</a></li>
                        <li><a href="Default2.aspx">Java</a></li>
                        <li><a href="#">VB.Net</a></li>
                        <li><a href="#">C#</a></li>
                    </ul> 
                </div>
                <div class="span9">
                    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>

    </div>
    </form>
</body>
</html>




  • 

  • 

  •
    然后，我将此脚本添加到头部，以解决菜单问题：

    <script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.pathname;
        var substr = url.split('/');
        var urlaspx = substr[substr.length - 1];
        $('.nav').find('.active').removeClass('active');
        $('.nav li a').each(function () {
            if (this.href.indexOf(urlaspx) >= 0) {
                $(this).parent().addClass('active');
            }
        });
    });
</script>

    
$（文档）.ready（函数（）{
var url=window.location.pathname；
var substr=url.split（'/'）；
var urlaspx=substr[substr.length-1]；
$（'.nav'）.find（'.active'）.removeClass（'active'）；
$（'.nav li a'）。每个（函数（）{
如果（this.href.indexOf（urlaspx）>=0）{
$（this.parent（）.addClass（'active'）；
}
});
});
    然而，一切都没有改变。当我从导航栏中选择任何项目时，活动类尚未添加到新选择的项目中，我不知道为什么您能帮我解决这个问题吗？

    我已经将它放在我的每个内容页面中，更改每个页面的导航项id（这使用JQuery选择器）。因此，要让它对您起作用，您需要为列表项提供一个Id。我不会将“active”类添加到母版页，因为我们需要做的只是在加载内容时突出显示相应的类

    <script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("[id$=yourNavItemId]").addClass("active");
    });
</script>

    
$（文档）.ready（函数（）{
$（“[id$=yourNavItemId]”）addClass（“活动”）；
});
    注意：如果您使用ASP.NET控件而不是导航栏中的列表项，则它们可能在运行时被加上前缀，导致javascript找不到您认为需要的Id

    使用以下命令：

    <div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="/Default.aspx">Default</a></li>
                <li><a href="/Clients.aspx">Clients</a></li>
                <li><a href="/_display/">Display</a></li>
            </ul>
        </div>
    </div>
</div>

$(document).ready(function () {
        var url = window.location;
        $('.navbar .nav').find('.active').removeClass('active');
        $('.navbar .nav li a').each(function () {
            if (this.href == url) {
                $(this).parent().addClass('active');
            }
        }); 
    });

    

      

    • 

    • 

    • 

    
$（文档）.ready（函数（）{
var url=window.location；
$（'.navbar.nav'）.find（'.active'）.removeClass（'active'）；
$（'.navbar.nav li a'）。每个（函数（）{
如果（this.href==url）{
$（this.parent（）.addClass（'active'）；
}
}); 
});
    例如：

    并且，在“href”中使用“Page.ResolveUrl”
    更好…

    事实上雷纳尔多差点就吃了。。。 至少对我来说，根据他的例子，激活当前选项和取消激活前一个选项都非常有效

    $(document).ready(function() {
    var url = window.location;                
    $('ul.nav li a').each(function () {
         if (this.href == url) {
              $("ul.nav li").each(function () {
                   if ($(this).hasClass("active")) {
                        $(this).removeClass("active");
                   }
              });
              $(this).parent().addClass('active');
         }
    });
});
    如果您正在使用带有下拉菜单的导航栏，请将下面的脚本放在母版页的末尾（正文结束标记之前）：

    
$（文档）.ready（函数（）{
var url=window.location；
$（'ul.nav li a'）。每个（函数（）{
如果（this.href==url）{
$（“ul.nav li”）。每个（功能）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
}
});
$（this.parent（）.parent（）.parent（）.addClass（'active'）；
}
});
});
    这对我来说完全有效。

    如果我有子页面，以下代码可以工作：

     $(document).ready(function () {

        $('.navbar .nav').find('.active').removeClass('active');

        var url = window.location.toString();
        var u = url.substring(0, url.lastIndexOf("/")).toString();

        $('.navbar .nav li a').each(function () {

            var hr = this.href.substring(0, this.href.lastIndexOf('/')).toString();

            if ((u == hr) || (u.indexOf(hr) > -1))
            {
                $(this).parent().addClass('active');
                return false;
            }
        });
        // Deactivation to manually add items you have with href = "#" example:
        $('#liSalir').removeClass('active');
});
    我知道这篇文章很旧，但很有用

        $(document).ready(function () {

    var url = window.location;
    $('ul.nav li a').each(function () {
        if (this.href == url) {
            $("ul.nav li").each(function () {
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                }
            });
            $(this).parents().addClass('active');
        }

    });

});
    由于您还希望激活所有父级。

    我创建了一个示例，完全满足您的要求，您需要根据需要修改代码。 
    var windowUrl = window.location.href.toLowerCase();
//var windowUrl = window.location.href.toLowerCase().split('.')[0];
setTimeout(function () {
    var windowUrl = window.location.href.toLowerCase();
    $('#nav li').removeClass('active');
    $('#nav li').each(function (index) {
        pageUrl = $(this).find('a').attr('href');
        if (windowUrl.indexOf(pageUrl) > -1) {
            $(this).addClass('active');
        }
    });
}, 10);
    在母版页上使用此jquery

     <script type="text/javascript">
        $(function () {
            $('[id*=submenu]').addClass('sub-menu open');
            $('[id*=Master_Pages]').attr("aria-expanded", true);

            $('.subMenus').click(function () {
                localStorage.setItem('lastTab', $(this).attr('id'));
            });
        });
        function pageLoad() {
            var isActiveLink = false;
            $.each($('.subMenus'), function () {
                if ($(this).attr('id') == localStorage.getItem('lastTab')) {
                    $(this).closest('li').addClass('active');
                    localStorage.removeItem('lastTab');
                    isActiveLink = true;
                }
                else {
                    $(this).closest('li').removeClass('active');
                }
            });
            if (!isActiveLink) {
                $('[id*=Master_Designation]').closest('li').addClass('active');
            }
        }
    </script>

    
$（函数（）{
$（'[id*=子菜单]）.addClass（'子菜单打开'）；
$（'[id*=Master_Pages]'）。attr（“aria扩展”，true）；
$（'.subMenus'）。单击（函数（）{
localStorage.setItem（'lastTab'，$（this.attr（'id'））；
});
});
函数pageLoad（）{
var isActiveLink=错误；
$.each（$（'.subMenus'），函数（）{
if（$（this.attr（'id'）==localStorage.getItem（'lastTab'））{
$（this）.closest（'li'）.addClass（'active'）；
localStorage.removietem（'lastTab'）；
isActiveLink=true；
}
否则{
$（this）.closest（'li'）.removeClass（'active'）；
}
});
如果（！isActiveLink）{
$（'[id*=Master_Designation]'）。最近（'li'）。addClass（'active'）；
}
}
    对于像我这样喜欢服务器端实现的人，将感兴趣的li标记转换为Master.Page文件上的runat=“server”。所讨论的代码将类似于以下内容：

     <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item" runat="server" id="tabHome" >
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" runat="server" id="tabContact">
                        <a class="nav-link" href="/Contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" runat="server">Hello, <asp:LoginName runat="server" />
                        </a>
                    </li>
                </ul>
            </div>
    C#实施：

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)

    Select Case thisURL
        Case "Default", "default.aspx"  
            tabContact.Attributes.Remove("active")
            tabHome.Attributes.Add("class", "active")
        Case "Contact"
            tabHome.Attributes.Remove("active")
            tabContact.Attributes.Add("class", "active")
    End Select
End Sub

    Protected void Page_Load(Object sender, EventArgs e)
  {
    string thisURL = Request.Url.Segments[Request.Url.Segments.Length - 1];

    switch (thisURL)
    {
        Case "Default":
        Case "default.aspx": 
            {
                tabContact.Attributes.Remove("active");
                tabHome.Attributes.Add("class", "active");
                break;
            }

        Case "Contact" : 
            {
                tabHome.Attributes.Remove("active");
                tabContact.Attributes.Add("class", "active");
                break;
            }
    }
}
    由于“Default.aspx”是最初应该打开的页面，“Home”菜单项将在用户进入网站时突出显示。下面显示了一个示例：

    为了简单起见，示例中只使用了两个navbar项，但如果需要更多，则可以实现相同的逻辑

    我希望能有所帮助。

    这项功能非常有效，无需使用本地存储！这个C#解决方案对我很有效，但是这行代码：“string thisURL=Request.Url.Segments（Request.Url.Segments.Count-1）；有点不正确，它需要方括号而不是括号和长度属性（不是计数），比如：“string thisURL=Request.Url.Segments[Request.Url.Segments.Length-1]；“这让我有点困惑。在这里找到了masoud Cheragee解释的正确语法：@Doreen，谢谢！我已经更新了原始答案中的代码。如果您添加解决方案的解释，那会更好，因此我们可以根据我们的要求进行编辑 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)

    Select Case thisURL
        Case "Default", "default.aspx"  
            tabContact.Attributes.Remove("active")
            tabHome.Attributes.Add("class", "active")
        Case "Contact"
            tabHome.Attributes.Remove("active")
            tabContact.Attributes.Add("class", "active")
    End Select
End Sub

    Protected void Page_Load(Object sender, EventArgs e)
  {
    string thisURL = Request.Url.Segments[Request.Url.Segments.Length - 1];

    switch (thisURL)
    {
        Case "Default":
        Case "default.aspx": 
            {
                tabContact.Attributes.Remove("active");
                tabHome.Attributes.Add("class", "active");
                break;
            }

        Case "Contact" : 
            {
                tabHome.Attributes.Remove("active");
                tabContact.Attributes.Add("class", "active");
                break;
            }
    }
}