10/10/2018, 11:38
cho mình hỏi cách add class active trong menu
[HTML]
<body>
<div class="container">
<ul id="menu">
<li class="active"><a href="trangchu.html">Trang chủ</a></li>
<li class="hover"><a href="gioithieu.html">Giới thiệu</a></li>
<li class="hover"><a href="dieukhoan.html">Điều khoản</a></li>
</ul>
</div>
</body>
[/HTML]
mình có 3 trang html như trên, giờ mình muốn khi click vào trang gioithieu thì nó sẽ xóa class active ở trangchu và thay vào đó là class hover, còn link mình vừa click thì dc thay bằng class hover, bạn nào biết cách làm bằng js hoặc jquery thì chỉ mình với, thanks
<body>
<div class="container">
<ul id="menu">
<li class="active"><a href="trangchu.html">Trang chủ</a></li>
<li class="hover"><a href="gioithieu.html">Giới thiệu</a></li>
<li class="hover"><a href="dieukhoan.html">Điều khoản</a></li>
</ul>
</div>
</body>
[/HTML]
mình có 3 trang html như trên, giờ mình muốn khi click vào trang gioithieu thì nó sẽ xóa class active ở trangchu và thay vào đó là class hover, còn link mình vừa click thì dc thay bằng class hover, bạn nào biết cách làm bằng js hoặc jquery thì chỉ mình với, thanks
Bài liên quan
$("#menu li a").click( function() { $(this).parent().parent().find("li").removeClass("active").removeClass("hover").addClass("hover"); $(this).parent().removeClass("hover").addClass("active"); });http://www.mediafire.com/?2ujrrbmvd9dkdwc
Nếu ko thì chỉ cần thay đổi trong mỗi file thôi chứ cần gì jQuery. Chúng ta chỉ cần js khi ở trong cùng 1 trang.
cách dẽ nhất rùi bác. còn nếu dùng lập trình xuất ra gắn thẻ active vào thì phức tạp hơn. dùng javascript thì chỉ có tác dùng trên trang đó thôi cái này chỉ dùng cho tab......(dùng javascript thì có thể biến tấu thêm biến của ngôn ngữ lập trình cũng được từy bác) cách đầu hơi chuối nhưng chạy ok không cần suy nghĩ nhiều cách 2 thì hơi mệt nhưng khi thêm menu vào ở phần back-end thì rất linh động . chúc bác thành công
$(document).ready(function(){ $('#menu li').click(function(){ $('#menu li.active').removeClass('active').addClass('hover'); $(this).addClass('active').removeClass('hover'); }); });[=========> Bổ sung bài viết <=========]
mình thấy giờ các trang web đều active menu để cho người dùng biết mình đang ở trang nào, không biết họ dùng cách gì vậy nhỉ?
Bạn cần xác định được là mình (hoặc người dùng) đang ở trang nào, ví dụ đang ở trang chủ thì bạn có cái class là active, và các mục còn lại không có class này.
<ul> <li class="<?php if($page=='1'){echo "active";} ?>">Trang chủ</li> <li class="<?php if($page=='2'){echo "active";} ?>">Tin tức</li> <li class="<?php if($page=='3'){echo "active";} ?>">Sản phẩm</li> </ul>Cái nữa. Nếu như ý bạn đặt các class như vậy rồi dùng Jquery để remove và add lại class, thì chỉ áp dụng được khi sử dụng Ajax hoặc Jquery khi làm menu thôi. Còn dùng link menu bình thường thì không được, vì nó redirect đi một nơi khác nên việc remove và add đó khôgn còn tác dụng gì nữa