CSS: Cách thay đổi màu của menu trang điều hướng hiện hoạt

Question

Tôi đang cố gắng thay đổi màu của liên kết điều hướng trang đang hoạt động hoặc hiện tại do người dùng chọn trên trang web của tôi. Tôi đang làm gì sai? Cảm ơn.

Cho đến nay CSS trông như thế này:

div.menuBar 
{ 
    font-family: BirchStd; 
    font-size: 40px; 
    line-height: 40px; 
    font-weight: bold; 
    text-align: center; 
    letter-spacing: -0.1em; 
} 

div.menuBar li{list-style:none; display: inline;} 
div.menuBar li a:active{color:#FF0000;} 
div.menuBar ul{margin:0;} 

Và HTML của tôi gọi một mẫu trang cho menu điều hướng bằng cách sử dụng bao gồm chức năng PHP:

<div class="menuBar"> 
    <ul> 
    <li><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

Answer 1

Tôi nghĩ rằng bạn đang nhận được bối rối về những gì các selector a:active CSS làm. Điều này sẽ chỉ thay đổi màu của liên kết của bạn khi bạn nhấp vào liên kết đó (và chỉ trong khoảng thời gian nhấp chuột, tức là thời lượng nút chuột của bạn nằm xuống). Những gì bạn cần làm là giới thiệu một lớp học mới, ví dụ: .selected vào CSS của bạn và khi bạn chọn liên kết, hãy cập nhật mục menu đã chọn với lớp mới, ví dụ:

<div class="menuBar"> 
    <ul> 
     <li class="selected"><a href="index.php">HOME</a></li> 
     <li><a href="two.php">PORTFOLIO</a></li> 
     .... 
    </ul> 
</div> 

// specific CSS for your menu 
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS 
li.selected a { color: #FF0000; } 

Bạn sẽ cần phải cập nhật trang mẫu của bạn để mất trong một tham số selectedPage.

Answer 2

Thêm ID current cho trang hiện hoạt/hiện tại:

<div class="menuBar"> 
    <ul> 
    <li id="current"><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

#current a { color: #ff0000; } 

Answer 3

Trạng thái CSS :active có nghĩa là trạng thái hoạt động của liên kết được nhấp - thời điểm bạn đã nhấp vào liên kết, nhưng chưa được nhả nút chuột, ví dụ. Nó không biết bạn đang ở trang nào và không thể áp dụng bất kỳ kiểu nào cho các mục menu.

Để khắc phục vấn đề của bạn, bạn phải tạo một lớp và thêm nó bằng tay vào menu của trang hiện tại:

a.active { color: #f00 } 

<ul> 
    <li><a href="index.php" class="active">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul>