StaticSelectedStyle-CssClass Không Hoạt Động

Question

Tôi đang xây dựng một ứng dụng ASP.NET 4.0 web trong đó tôi có một điều khiển đơn như sau:

#menu { 
     width: 940px; 
     height: 36px; 
     margin: 0 auto; 
     padding: 0; 
    } 

    #menu ul { 
     margin: 0px 0px 0px 10px; 
     padding: 0; 
     list-style: none; 
     line-height: normal; 
    } 

    #menu li { 
     float: left; 
    } 

    #menu a { 
     display: block; 
     height: 26px; 
     margin-right: 2px; 
     margin-bottom: 10px; 
     padding: 10px 20px 0px 20px; 
     text-decoration: none; 
     text-align: center; 
     text-transform: uppercase; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     font-weight: bold; 
     color: #FFFFFF; 
     border: none; 
    } 

    #menu a:hover, .selectedMenuItem { 
     background: #FFFFFF; 
     text-decoration: none; 
     color: #333333; 
    } 


    <asp:Menu ID="menu" runat="server" StaticSelectedStyle-CssClass="selectedMenuItem"> 
    <Items> 
     <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="Services" NavigateUrl="~/Services.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem> 
    </Items> 
    </asp:Menu> 

Tôi muốn các mục menu đã chọn được kiểu theo lớp css selectedMenuItem nhưng vì một số lý do không xảy ra. Làm cách nào để khắc phục sự cố này?

Answer 1

Bạn đã xác định nguồn borwser của mình để đảm bảo rằng ASP.NET không tự động đổi tên giá trị ID kiểm soát menu của bạn?

Answer 2

Tôi gặp vấn đề tương tự và cố gắng tìm hiểu điều gì đã xảy ra. Trong mã nguồn của trang html thje tôi tìm thấy điều này:

<div class="menu" id="NavigationMenu"> 
    <ul class="level1"> 
     <li><a class="level1" href="../Default.aspx">Start</a></li> 
     <!-- more li items with the same class --> 
    </ul> 

Tôi mong đợi tên CssClass của tôi nhưng đã tìm thấy cấp1 thay thế. Nếu tôi đổi css thành:

#NavigationMenu .level1 li 
{ 
    padding: 10px; 
} 

nó hoạt động. Có lẽ không phải là cách chính xác để làm điều đó, nhưng đó là một công việc xung quanh vấn đề ở bàn tay. Có lẽ không phù hợp trên một máy chủ sản xuất, không may

Answer 3

1- Xác định .selectedMenuItem lớp như dưới đây, không phụ thuộc vào ID (#menu)

.selectedMenuItem { 
     background: #FFFFFF; 
     text-decoration: none; 
     color: #333333; 
} 

2- Sử dụng phương pháp addClass jQuery, ràng buộc phương pháp mà sự kiện nhấp chuột các mục menu.

http://api.jquery.com/addClass/

Answer 4

Bạn có thể quản lý này từ mã sau vào sự kiện Page_Load của tập tin Master. Ví dụ, bạn có thể sử dụng phương thức Request.Path để lấy đường dẫn trang hiện tại và sau đó sử dụng nút chuyển hoặc câu lệnh để thêm kiểu theo cách thủ công vào MenuItem tương ứng.

Answer 5

chỉ cần thêm css này vào biểu định kiểu để hiển thị tab đang hoạt động với hình ảnh backgroung hoặc thêm màu nền hoạt động không cần phải thực hiện bất kỳ điều khiển menu nào và thêm bất kỳ kiểu tĩnh hoặc động nào trong menu.

.menu a.static.selected 
{ 
background: url("../images/bg.jpg") repeat scroll 0 0; 
color: white;`` 
text-decoration: none; 
} 
.menu li a.dynamic.selected 
{ 

background: url("../images/bg.jpg") repeat scroll 0 0; 
color: white; 
text-decoration: none; 
}