Làm cách nào để xóa một đường viền đang hoạt động khỏi jquery accordion?

Question

Tôi đang sử dụng Jquery Accordion. Liên kết hoạt động có một đường viền. Tôi đã cố gắng sử dụng css:

#accordion a:focus 
{ outline: none; } 
#accordion a:active 
{outline: none; font-weight:bold;} 

và cũng

#accordion a:-moz-any-link:focus 
{ outline: none; } 

Không ai trong số những vẻ làm việc. Bất cứ ai có thể tư vấn cho một thiết lập hoặc tùy chọn khác để loại bỏ các phác thảo chấm xung quanh các liên kết hoạt động?

Answer 1

Khi tôi cần ghi đè kiểu được áp dụng bởi các phần tử giao diện người dùng jQuery, tôi thường thêm biểu định kiểu mà tôi tải sau biểu định kiểu UI của jQuery và ghi đè lên nó, sử dụng cùng bộ chọn để tôi biết rằng kiểu của tôi sẽ ưu tiên. Trong trường hợp này, hãy tìm các kiểu được liên kết với accordion hoặc trạng thái widget và ghi đè chúng.

Answer 2

Nếu bạn đang sử dụng Accordion của jQueryUI, http://jqueryui.com/demos/accordion/, bạn không nên gặp sự cố với các loại phác thảo này. Nếu bạn là mặc dù, bạn có thể làm như sau:

$(".ui-accordion-header a").click(function(){ 
    $(this).blur(); 
}); 

Trong thực tế, phương pháp này sẽ làm việc với chỉ là về bất kỳ plugin accordion - chỉ cần chắc chắn để thay đổi bộ chọn để nhắm mục tiêu các liên kết chịu trách nhiệm về việc mở rộng/thu gọn dữ liệu tấm.

Answer 3

Đảm bảo nhấn F5 một lần trong một thời gian ... và đảm bảo bạn không chỉnh sửa các tệp khác ngoài bạn nghĩ.

Answer 4

SORTED:

sửa đổi css để - ui-state-tập trung

Answer 5

Thêm phần này vào CSS stylesheet của bạn và nó sẽ chăm sóc của các phác thảo mờ/Trọng tâm:

#accordion .ui-state-focus{ 
    outline: none; 
} 

Answer 6

Bạn cần tìm ra lớp của phần tử tab đang được widget sử dụng. Ví dụ,

.ui-state-focus { outline: none; } 

công trình trên phiên bản mới nhất của jQuery UI, nhưng trên một phiên bản trước đó như 1.6, bạn sẽ cần phải sử dụng này:

.ui-accordion-header {outline: none;} 

Answer 7

Tôi đã chỉ nhìn thấy điều này xảy ra với thẻ tiêu đề cho đến nay. Để xóa mã, hãy thêm mã

h1, h2, h3, h4{outline:none;}