Xây dựng thực đơn của bạn như thế này, trong HTML:
<body id='Search' >
<div id='menu'>
<div class='bars'></div>
<a href='/home/' title='Home'>Home</a>
<a href='/community/' title='Community'>Community</a>
<a href='/search/' title='Search'>Search</a>
<a href='/contact/' title='Contact'>Contact</a>
<div class='bars shift'></div>
</div>
</body>
Lưu ý rằng tag cơ thể có một trang cụ thể id (như Cody gợi ý). Cũng lưu ý rằng id này phải giống với giá trị của thuộc tính title cho liên kết menu.
Sau đó sử dụng CSS này:
.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;}
.shift {margin-top:-6px;}
#menu {font-family:arial;font-size:12pt;text-align:center;}
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;}
.active {border-bottom:5px solid red;}
Cuối cùng, thêm jQuery này vào mỗi trang:
$(document).ready(function(){
var id = $('body').attr('id');
$('#menu a').each(function() {
var title = $(this).attr('title');
$(this).removeClass('active');
if (title == id) $(this).addClass('active');
});
});
Bạn có thể thấy một fiddle demo sống here. (Để kiểm tra, chỉ cần thay đổi id của phần tử body và nhấn run.)
EDIT: Lợi ích của phương pháp này so với phương pháp của Cody Grays là bạn không cần sửa đổi css mỗi khi bạn thay đổi HTML khi bạn thêm, xóa hoặc chỉnh sửa mục menu. Mặt khác, nó sử dụng jQuery. Tuy nhiên, nếu bạn muốn một giải pháp css thuần túy, chỉ cần loại bỏ jQuery, và id của phần tử body, và thay vào đó áp dụng trực tiếp lớp .active cho liên kết cụ thể, tùy thuộc vào trang cụ thể (tương tự như gợi ý của jackJoe).
Điều này có thể dễ dàng được sửa đổi nếu bạn phải sử dụng các yếu tố <li>.
Cũng giống như bạn có thể giới thiệu một id nội dung tĩnh trước hoặc động với lập trình phía máy chủ, bạn cũng có thể áp dụng lớp đang hoạt động trước hoặc phía máy chủ. – Stefan