突出主网页活动菜单项 [英] Highlight active menu items in master page

查看：66
本文介绍了突出主网页活动菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是主我的菜单项。由于我使用的母版页，我很困惑如何突出积极的菜单项。任何人都可以帮助我。因为我有4页，我在所有的页面加载事件在4页尝试这种低于code和没有工作。

 如果（！的IsPostBack）
        {
            菜单M =（菜单）this.Master.FindControl（菜单）;
            的foreach（在M.Items菜单项项）
            {
                如果（item.Text ==更新）
                {
                    item.Selected = TRUE;
                }
            }
        } ＆LT; D​​IV ID =菜单＆GT;
                ＆LT; UL＆GT;
                    ＆LT;立GT;
                        ＆LT; ASP：LinkBut​​ton的ID =更新=服务器的OnClick =update_Click＆GT;更新和LT; / ASP：LinkBut​​ton的＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;
                        ＆LT; ASP：LinkBut​​ton的ID =批量=服务器的OnClick =bulkupdate_Click＆GT;散装＆LT; / ASP：LinkBut​​ton的＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;
                        ＆LT; ASP：LinkBut​​ton的ID =配置文件=服务器的OnClick =userprofiles_Click＆GT;预案和LT; / ASP：LinkBut​​ton的＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;
                        ＆LT; ASP：LinkBut​​ton的ID =帮助=服务器的OnClick =help_Click＆gt;帮助＆LT; / ASP：LinkBut​​ton的＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;#menu UL {
保证金：0;
填充：7px的6个像素0;
背景：＃b6b6b6的url（'/图像/ Overlay.png'）重复-X 0 -110px;
行高：100％;
边界半径：1EM;
字体：正常0.5333333333333333em宋体，黑体，无衬线;
-webkit-边界半径：5像素;
-moz-边界半径：5像素;
边界半径：5像素;
-webkit-的box-shadow：0 1px的RGBA 3PX（0，0，0，0.4）;
-moz-的box-shadow：0 1px的RGBA 3PX（0，0，0，0.4）;
宽度100％;
}
#menu李{
保证金：0为5px;
填充：0 0 8像素;
浮动：左;
位置：相对;
列表样式：无;
}
#menu一个，
#menu一：链接{
字体重量：大胆的;
字体大小：16像素;
颜色：＃444444;
文字修饰：无;
显示：块;
填充：8像素20像素;
保证金：0;
边界半径：5像素;
-webkit-边界半径：5像素;
-moz-边界半径：5像素;
文字阴影：0 1px的1px的RGBA（0，0，0，0.3）;
}
#menu：悬停{
背景：＃000;
颜色：#FFF;
}
#menu。主动一，
#menu李：悬停＆GT;一个 {
背景：#bdbdbd URL（'/图像/ Overlay.png'）重复-X 0 -40px;
背景：＃666666 URL（'/图像/ Overlay.png'）重复-X 0 -40px;
颜色：＃444;
边框顶部：固体1px的＃f8f8f8;
-webkit-的box-shadow：0 1px的1px的RGBA（0，0，0，0.2）;
-moz-的box-shadow：0 1px的1px的RGBA（0，0，0，0.2）;
箱阴影：0 1像素1像素RGBA（0，0，0，0.2）;
文字阴影：0 1px的0 #FFFFFF;
}
#menu UL UL李：一个盘旋，
#menu李：李悬停A {
背景：无;
边界：无;
颜色：＃666;
-webkit-箱阴影：无;
-moz-箱阴影：无;
}
#menu UL UL：悬停{
背景：＃！7d7d7d URL（'/图像/ Overlay.png'）重复-X 0 -100px重要;
！颜色：#FFF重要;
-webkit-边界半径：5像素;
-moz-边界半径：5像素;
边界半径：5像素;
文字阴影：0 1px的1px的RGBA（0，0，0，0.1）;
}
#menu李：悬停＆GT; UL {
显示：块;
}
#menu UL UL {
显示：无;
保证金：0;
填充：0;
宽度：185px;
位置：绝对的;
顶部：40像素;
左：0;
背景：网址（'/图像/ Overlay.png'）重复 -  X 0 0;
边框：1px的固体＃b4b4b4;
-webkit-边界半径：5像素;
-moz-边界半径：5像素;
边界半径：5像素;
-webkit-的box-shadow：0 1px的RGBA 3PX（0，0，0，0.3）;
-moz-的box-shadow：0 1px的RGBA 3PX（0，0，0，0.3）;
箱阴影：0 1像素3PX RGBA（0，0，0，0.3）;
}
#menu UL UL李{
飘：无;
保证金：0;
填充：的3px;
}
#menu UL UL一，
#menu UL UL一：链接{
字体重量：正常;
字体大小：12像素;
}
#menu UL：{后
内容：;'。
显示：块;
明确：两者;
visibility：hidden的;
行高：0;
高度：0;
}
* HTML #menu UL {
高度：1％;
}


解决方案

通过引导和jQuery工作

  $（函数（）{
        $（。Navbar的BTN A）。每个（函数（）{
            如果（this.href.trim（）。分裂（/）。拼接（3,4）[0] == window.location.pathname.split（/）。拼接（1，1）[0] ）
                $（本）.parent（）addClass（活动）。
        }）;
    }）

I am using a master for my menu items. Since I am using master page, I am confused how to highlight active menu item. Can anyone help me out. Since I have 4 pages, I tried this below code in all page load event in 4 pages and didn't work.

if (!IsPostBack)
        {
            Menu M = (Menu)this.Master.FindControl("menu");
            foreach (MenuItem item in M.Items)
            {
                if (item.Text == "update")
                {
                    item.Selected = true;
                }
            }
        }

 <div id="menu">
                <ul>
                    <li>
                        <asp:LinkButton ID="update"  runat="server"  OnClick="update_Click">Update</asp:LinkButton></li>
                    <li>
                        <asp:LinkButton ID="bulk" runat="server" OnClick="bulkupdate_Click">Bulk</asp:LinkButton></li>
                    <li>
                        <asp:LinkButton ID="profiles" runat="server" OnClick="userprofiles_Click">Profiles</asp:LinkButton></li>
                    <li>
                        <asp:LinkButton ID="help" runat="server" OnClick="help_Click">Help</asp:LinkButton></li>
                </ul>
            </div>

#menu ul {
margin: 0;
padding: 7px 6px 0;
background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width 100%;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 16px;
color: #444444;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#menu a:hover {
background: #000;
color: #fff;
}
#menu .active a,
#menu li:hover > a {
background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px;
background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px;
color: #444;
border-top: solid 1px  #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu ul ul a:hover {
background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url('/Images/Overlay.png') repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#menu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #menu ul {
height: 1%;
}

解决方案

Working with Bootstrap and jQuery

$(function () {
        $(".navbar‐btn a").each(function () {                  
            if (this.href.trim().split("/").splice(3, 4)[0] == window.location.pathname.split("/").splice(1, 1)[0])
                $(this).parent().addClass("active");
        });
    })

这篇关于突出主网页活动菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆