Hướng dẫn thêm active vào menu
admin
2022-04-09T06:21:47-04:00
2022-04-09T06:21:47-04:00
http://dacloi.net/nukeviet-20/huong-dan-them-active-vao-menu-33.html
http://dacloi.net/uploads/news/2021_10/home_1.png
Sourcode teamplate free | Nukeviet HCMC | PSD file teamplate | Figma teamplate | Nukeviet
http://dacloi.net/uploads/vncode.png
VNCODE hôm nay xin chia sẽ đến mọi người cách để nhận diện thẻ active cho menu của NUKEVIET. NUKEVIET CMS là hệ quản trị nội dung (Content Management System - CMS) xây dựng dựa trên nền tảng phần mềm nguồn mở NukeViet - một phần mềm nguồn mở thế hệ mới do người Việt phát triển.
Hướng dẫn thêm thẻ active cho menu
Thêm đoạn code dưới đây vào <script></script> ở thư mục /themes/tên theme đang sử dụng/modules/menu/global.bootstrap.tpl
$(document).ready(function(){
$('li a.active').removeClass('active');
$(' li a').filter(function(){
return this.href.split('/')[3] + '/'==location.href.split('/')[3] + '/'}).addClass('active')
$('ul li a').click(function(){
$('li a.active').removeClass('active');
$(this).addClass('active');
});
});
Thêm 1 class="active" ở thẻ li a home
<li>
<a class="active" title="{LANG.Home}" href="/index.php?language=vi">{LANG.Home}</a>
</li>
Dưới đây là toàn bộ code global.bootstrap.tpl (Lưu ý: code đã được chỉnh sửa để phù hợp với giao diện)
<!-- BEGIN: submenu -->
<li>
<a href="{SUBMENU.link}" title="{SUBMENU.note}"{SUBMENU.target}>
{SUBMENU.title_trim}</a>
</li>
<!-- END: submenu -->
<!-- BEGIN: main -->
<ul class="main-menu list-style">
<li>
<a class="active" title="{LANG.Home}" href="/index.php?language=vi">{LANG.Home}</a>
</li>
<!-- BEGIN: top_menu -->
<li <!-- BEGIN: has_class -->class="has-children"<!-- END: has_class -->>
<a href="{TOP_MENU.link}" title="{TOP_MENU.note}">
<!-- BEGIN: icon --> <img src="{TOP_MENU.icon}" alt="{TOP_MENU.note}" /> <!-- END: icon -->{TOP_MENU.title_trim}</a>
<ul <!-- BEGIN: has_sub --> class="sub-menu list-style"<!-- END: has_sub -->>
<!-- BEGIN: sub --> {SUB} <!-- END: sub -->
</ul>
</li>
<!-- END: top_menu -->
</ul>
<script>
$(document).ready(function(){
$('li a.active').removeClass('active');
$(' li a').filter(function(){
return this.href.split('/')[3] + '/'==location.href.split('/')[3] + '/'}).addClass('active')
$('ul li a').click(function(){
$('li a.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
<!-- END: main -->
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút Like và chia sẽ để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.
Tác giả: admin
Tags: nukeviet, nukeviet 4
Ý kiến bạn đọc
Bạn cần đăng nhập với tư cách là Thành viên chính thức để có thể bình luận
Những tin mới hơn
-
Hướng dẫn thêm đọc bằng audio vào module news nukeviet
(18/10/2021) -
Module slider gallery logo nukeviet 4.x
(26/10/2021) -
Incorrect temprorary directory specified fix lỗi trên Nukeviet
(25/11/2021) -
Block hiệu ứng tuyết rơi nukeviet 4.x
(26/11/2021) -
Block nukeviet hiệu ứng cánh hoa mai rơi
(29/12/2021) -
Hiển thị xem trước meta google
(14/03/2022) -
Hướng dẫn làm menu đa cấp mobile nukeviet
(15/03/2022) -
Fix lỗi Undefined index: captcha_area_comm nukeviet 4.0
(17/03/2022) -
Hướng dẫn xử lý ký tự đặc biệt khi xuất excel
(21/03/2022)
Những tin cũ hơn
-
Hướng dẫn thêm thống kê truy cập tháng trước vào block statics nukeviet
(12/10/2021) -
Block hotline contact nukevite 4.5
(17/09/2021)
Hỏi đáp với tôi
close- smart_toy Hi there 👋 How can I help you today?
send