10/10/2018, 11:42

Lưu giữ trạng thái của item menu khi người dùng click vào.

Em có cái menu như sau:

home
news
contact
login


Khi người dùng click vào home thì nó hiển thì một màu đỏ chẳng hạn ( ý muốn nói người dùng đang ở trang home). Khi người dùng click vào news thì news sẽ hiển thị màu đỏ (ý muốn nói người dùng đang ở trang news). Tương tư cho các trang khác.
Em sử dụng css visited nhưng ko được.
Vô Thin viết 13:44 ngày 10/10/2018
Bạn phải sử dụng JavaScript và / hoặc ngôn ngữ ở phía server để kiểm tra tham số trên URL hoặc cookies để biết rằng trang được xem là trang nào rồi đổi màu cái tab mà trang đang xem có để nó thành khác màu với các tab khác. Còn CSS visited như bạn nói là nó đổi chung chung màu cho những text link đã có người từng click vào.

Mô phỏng cách mình nói để bạn tham khảo:

<?php
$current_page = $_GET['page'];
if ($current_page == 'news') {
echo 'đoạn HTML cho cái menu của bạn, ở tab News đổi màu chữ hoặc màu nền tùy bạn thích';
} else {
echo 'xuất ra menu mặc định có tab Trang chủ đang được làm đậm';
}
b.adung viết 13:46 ngày 10/10/2018
Ví dụ cho bạn đoạn Jquery nhé:

<ul class="menu">
<li><a>home</a></li>
<li><a>news</a></li>
<li><a>contact</a></li>
</ul>

jQuery().ready(function(){
$("ul[dot]menu li a")[dot]click(function(){
$("ul[dot]menu li a")[dot]removeClass("active");
$(this)[dot]addClass("active");
});
});

ở css thì bạn cho:
[dot]active{
color: red;
}
chieftain2t viết 13:44 ngày 10/10/2018
Thank 2 bác đã giúp đỡ.
chieftain2t viết 13:42 ngày 10/10/2018
Được gửi bởi b.adung
Ví dụ cho bạn đoạn Jquery nhé:

<ul class="menu">
<li><a>home</a></li>
<li><a>news</a></li>
<li><a>contact</a></li>
</ul>

jQuery().ready(function(){
$("ul[dot]menu li a")[dot]click(function(){
$("ul[dot]menu li a")[dot]removeClass("active");
$(this)[dot]addClass("active");
});
});

ở css thì bạn cho:
[dot]active{
color: red;
}
Bác ơi ko được. Khi click vào item thì nó hiện lên màu đỏ nhưng trang load xong thì nó cũng mất luôn.
Em đang code template cho joomla, còn mỗi phần này là chưa làm được.
b.adung viết 13:50 ngày 10/10/2018
Bạn nên tìm hiểu thêm sự các Even của Jquery như Hover hay Click nhé, không thể ai cũng có ngay đoạn code bạn cần đâu. Minh sửa một chút:

$( "ul[dot]menu li a" ).click( function() {
$(this)[dot]parent()[dot]parent()[dot]filter('a')[dot]removeClass( 'active' );
$(this )[dot]addClass( 'active' );
});
Bài liên quan
0