2016-05-30 5 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 уль Ли а: посетил средства посетил и, возможно, активная ссылка будет посещать уже. Вы должны изменить его на что-то вроде:

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> 
Смежные вопросы