2016-05-30 72 views
1

我无法更改asp.net主页面模板中的活动页面菜单颜色。我不知道为什么。一切都还好,我猜。 请参阅我的代码并推荐我该做什么。更改活动主页面菜单的颜色

由于提前

这里是我的site.css

/* DEFAULTS 
 
----------------------------------------------------------*/ 
 

 
body 
 
{ 
 
    background: #b6b7bc; 
 
    font-size: .80em; 
 
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    color: #696969; 
 
} 
 

 
a:link, a:visited 
 
{ 
 
    color: #034af3; 
 
} 
 

 
a:hover 
 
{ 
 
    color: #1d60ff; 
 
    text-decoration: none; 
 
} 
 

 
a:active 
 
{ 
 
    color: #034af3; 
 
} 
 

 
p 
 
{ 
 
    margin-bottom: 10px; 
 
    line-height: 1.6em; 
 
    height: 44px; 
 
} 
 

 

 
/* HEADINGS 
 
----------------------------------------------------------*/ 
 

 
h1, h2, h3, h4, h5, h6 
 
{ 
 
    font-size: 1.5em; 
 
    color: #666666; 
 
    font-variant: small-caps; 
 
    text-transform: none; 
 
    font-weight: 200; 
 
    margin-bottom: 0px; 
 
} 
 

 
h1 
 
{ 
 
    font-size: 1.6em; 
 
    padding-bottom: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
h2 
 
{ 
 
    font-size: 1.5em; 
 
    font-weight: 600; 
 
} 
 

 
h3 
 
{ 
 
    font-size: 1.2em; 
 
} 
 

 
h4 
 
{ 
 
    font-size: 1.1em; 
 
} 
 

 
h5, h6 
 
{ 
 
    font-size: 1em; 
 
} 
 

 
/* this rule styles <h1> and <h2> tags that are the 
 
first child of the left and right table columns */ 
 
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 
 
{ 
 
    margin-top: 0px; 
 
} 
 

 

 
/* PRIMARY LAYOUT ELEMENTS 
 
----------------------------------------------------------*/ 
 

 
.page 
 
{ 
 
    width: 960px; 
 
    background-color: #fff; 
 
    margin: 20px auto 0px auto; 
 
    border: 1px solid #496077; 
 
} 
 

 
.header 
 
{ 
 
    position: relative; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background: #4b6c9e; 
 
    width: 100%; 
 
} 
 

 
.header h1 
 
{ 
 
    font-weight: 700; 
 
    margin: 0px; 
 
    padding: 0px 0px 0px 20px; 
 
    color: #f9f9f9; 
 
    border: none; 
 
    line-height: 2em; 
 
    font-size: 2em; 
 
} 
 

 
.main 
 
{ 
 
    padding: 0px 12px; 
 
    margin: 12px 8px 8px 8px; 
 
    min-height: 420px; 
 
} 
 

 
.leftCol 
 
{ 
 
    padding: 6px 0px; 
 
    margin: 12px 8px 8px 8px; 
 
    width: 200px; 
 
    min-height: 200px; 
 
} 
 

 
.footer 
 
{ 
 
    color: #4e5766; 
 
    padding: 8px 0px 0px 0px; 
 
    margin: 0px auto; 
 
    text-align: center; 
 
    line-height: normal; 
 
} 
 

 

 
/* TAB MENU 
 
----------------------------------------------------------*/ 
 

 

 

 
div.hideSkiplink 
 
{ 
 
    background-color:#3a4f63; 
 
    width:100%; 
 
} 
 

 
div.menu 
 
{ 
 
    padding: 4px 0px 4px 8px; 
 
} 
 

 
div.menu ul 
 
{ 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: auto; 
 
} 
 

 
div.menu ul li a, div.menu ul li a:visited 
 
{ 
 
    background-color: #465c71; 
 
    border: 1px #4e667d solid; 
 
    color: #dde4ec; 
 
    display: block; 
 
    line-height: 1.35em; 
 
    padding: 4px 20px; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
} 
 

 
div.menu ul li a:hover 
 
{ 
 
    background-color: #bfcbd6; 
 
    color: #465c71; 
 
    text-decoration: none; 
 
} 
 

 
div.menu ul li a:active 
 
{ 
 
    background-color: #bfcbd6; 
 
    color: #bfcbd6; 
 
    text-decoration: none; 
 
} 
 

 

 

 

 

 
/* FORM ELEMENTS 
 
----------------------------------------------------------*/ 
 

 
fieldset 
 
{ 
 
    margin: 1em 0px; 
 
    padding: 1em; 
 
    border: 1px solid #ccc; 
 
} 
 

 
fieldset p 
 
{ 
 
    margin: 2px 12px 10px 10px; 
 
} 
 

 
fieldset.login label, fieldset.register label, fieldset.changePassword label 
 
{ 
 
    display: block; 
 
} 
 

 
fieldset label.inline 
 
{ 
 
    display: inline; 
 
} 
 

 
legend 
 
{ 
 
    font-size: 1.1em; 
 
    font-weight: 600; 
 
    padding: 2px 4px 8px 4px; 
 
} 
 

 
input.textEntry 
 
{ 
 
    width: 320px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
input.passwordEntry 
 
{ 
 
    width: 320px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
div.accountInfo 
 
{ 
 
    width: 42%; 
 
} 
 

 
/* MISC 
 
----------------------------------------------------------*/ 
 

 
.clear 
 
{ 
 
    clear: both; 
 
} 
 

 
.title 
 
{ 
 
    display: block; 
 
    float: left; 
 
    text-align: left; 
 
    width: auto; 
 
} 
 

 
.loginDisplay 
 
{ 
 
    font-size: 1.1em; 
 
    display: block; 
 
    text-align: right; 
 
    padding: 10px; 
 
    color: White; 
 
    height: 77px; 
 
} 
 

 
.loginDisplay a:link 
 
{ 
 
    color: white; 
 
} 
 

 
.loginDisplay a:visited 
 
{ 
 
    color: white; 
 
} 
 

 
.loginDisplay a:hover 
 
{ 
 
    color: white; 
 
} 
 

 
.failureNotification 
 
{ 
 
    font-size: 1.2em; 
 
    color: Red; 
 
} 
 

 
.bold 
 
{ 
 
    font-weight: bold; 
 
} 
 

 
.submitButton 
 
{ 
 
    text-align: right; 
 
    padding-right: 10px; 
 
}

这里是我的html代码

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
 
    CodeFile="About.aspx.cs" Inherits="About" %> 
 

 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
 
</asp:Content> 
 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
 
    <h2> 
 
     About 
 
    </h2> 
 
    <br /> 
 
    
 
     ROSC MIS Cell<br />  
 
     LGED 
 
    Bhaban<br /> 
 
    Level-11<br /> 
 
    Agargaon, Dhaka-1207<br /> 
 
</asp:Content>

回答

3

您可能无法更改菜单颜色,因为另一个CSS正在重写您的活动菜单样式。如果您的活动菜单样式是:

div.menu ul li a:active 
{ 
    background-color: #bfcbd6; 
    color: #bfcbd6; 
    text-decoration: none; 
} 

那么这种风格是强大的,将覆盖它:

div.menu ul li a, div.menu ul li a:visited 
{ 
    background-color: #465c71; 
    border: 1px #4e667d solid; 
    color: #dde4ec; 
    display: block; 
    line-height: 1.35em; 
    padding: 4px 20px; 
    text-decoration: none; 
    white-space: nowrap; 
} 

注意div.menu UL李一:参观访问手段也可能主动链接将被访问已经。你应该将其更改为类似:

div.menu ul li a:active, div.menu ul li a:active:visited 
{ 
    background-color: #bfcbd6; 
    color: #bfcbd6; 
    text-decoration: none; 
} 
0

请记住,每一次你在一个菜单项单击您的母版页里有一个帖子回服务器,并在浏览器中的新请求的页面被重新绘制。

你可以在母版页的文件装载函数添加逻辑来检查用户当前在什么页面,然后找到相应的菜单项,并为它的CSS,这里有一个例子:

<style type="text/css"> 
    .activeMenu { 
     border: 2px solid red; 
    } 
</style> 
<script src="Scripts/jquery-1.8.2.js"></script> 
<script type="text/javascript"> 
    $(function() { 

     var pageTitle = document.title; 

     alert("The user is on page - " + pageTitle); 

     $("#menu li").each(function() { 

      var menuItemText = $(this).text(); 

      alert("Menu item - " + menuItemText) 

      if (pageTitle == menuItemText) 
       $(this).addClass("activeMenu"); 
     }); 
    }); 
</script>