Để có được accordion để tự động mở phần đúng dựa trên URL, bạn sẽ bắt đầu với cho phép tùy chọn navigation với một cái gì đó như:
$('#accordion').accordion('option', 'navigation', true);
Theo mặc định, tùy chọn này sẽ tìm kiếm các liên kết tiêu đề accordion có một href phù hợp với fragme URL nt (nếu URL của bạn là http://somesite.com/about#contact, #contact là đoạn) và mở phần liên kết của tiêu đề đó. Vì bạn đang sử dụng accordion để điều hướng đến các trang khác nhau, bạn có thể sẽ không có mảnh vỡ URL để phù hợp chống lại, vì vậy bạn sẽ phải viết một tùy chỉnh navigationFilter:
$('#accordion').accordion('option', 'navigationFilter', function(){ ... });
Bạn có thể sử dụng tùy chọn navigationFilter để ghi đè cách plugin accordion khớp với các liên kết tiêu đề đến URL của trang hiện tại.
Cho đến nay, chúng tôi đã có phần phù hợp của accordion để mở dựa trên trang hiện tại. Tiếp theo, chúng ta cần đánh dấu liên kết trong phần đó tương ứng với trang. Bạn sẽ làm điều đó với một cái gì đó như:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion li').each(function() {
var li = $(this);
var a = $('a', li);
if(/* compare the href of the 'a' element to the current URL */) {
li.addClass('active');
}
});
});
</script>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<ul>
<li><a href="/help">Help</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
</div>
Ở đây chúng ta đang trải qua tất cả các liên kết trang trong accordion menu, chọn một trong đó phù hợp với URL hiện tại, và áp dụng một lớp .active với nó, mà bạn sau đó có thể tạo kiểu khác với CSS.
Một sang một bên: khác, có lẽ tốt hơn, cách để thực hiện phần thứ hai là xây dựng trang web với các lớp .active đã áp dụng cho các liên kết thích hợp, nhưng điều đó giả sử bạn có quyền kiểm soát trên phụ trợ và rằng Bạn biết làm thế nào để làm điều đó. Trong thực tế, nếu đúng như vậy, bạn có thể bỏ qua toàn bộ điều navigationFilter và tạo khối <script> để đặt tùy chọn active trên accordion để mở phần bên phải.
Nếu bạn đã đi với phương pháp thay đổi băm được mô tả ở đây, plugin sau đây chưa được so khớp: http://benalman.com/projects/jquery-bbq-plugin/ - nó sẽ sớm thay thế plugin lịch sử jQuery ngày tháng khủng khiếp. –
@ Alex - đẹp quá! không nhận thức được điều đó. – Matt
Cảm ơn bạn đã thông tin - Tôi sẽ xem liệu tôi có thể làm cho nó hoạt động với giải pháp của bạn hay không với giải pháp từ Không có bất ngờ (ở trên) - các ngón tay được vượt qua! – MelissaTA