Navs – chuyển đổi menu thả xuống liên kết điều hướng

Tài liệu và ví dụ về cách sử dụng các thành phần điều hướng đi kèm của Bootstrap.

Bạn đang xem : chuyển đổi thả xuống liên kết điều hướng

Điều hướng

Tài liệu và ví dụ về cách sử dụng các thành phần điều hướng đi kèm của Bootstrap.

Điều hướng cơ sở

Điều hướng có sẵn trong Bootstrap chia sẻ kiểu và đánh dấu chung, từ lớp cơ sở . nav đến trạng thái hoạt động và bị vô hiệu hóa. Hoán đổi các lớp bổ trợ để chuyển đổi giữa từng kiểu.

Thành phần cơ sở . nav được xây dựng với flexbox và cung cấp nền tảng vững chắc để xây dựng tất cả các loại thành phần điều hướng. Nó bao gồm một số ghi đè kiểu (để làm việc với danh sách), một số đệm liên kết cho các vùng truy cập lớn hơn và kiểu tắt cơ bản.

Thành phần cơ sở . nav không bao gồm bất kỳ trạng thái . active nào. Các ví dụ sau bao gồm lớp, chủ yếu để chứng minh rằng lớp cụ thể này không kích hoạt bất kỳ kiểu đặc biệt nào.

  

& lt; ul

class =

"nav"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Các lớp được sử dụng xuyên suốt, vì vậy, đánh dấu của bạn có thể siêu linh hoạt. Sử dụng & lt; ul & gt; như trên hoặc tự cuộn phần tử nói & lt; nav & gt; . Bởi vì . Nav sử dụng display: flex , các liên kết điều hướng hoạt động giống như các mục điều hướng, nhưng không có đánh dấu bổ sung.

  

& lt; nav

class =

"nav"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / nav & gt;

Các kiểu có sẵn

Thay đổi kiểu của thành phần . nav bằng các công cụ sửa đổi và tiện ích. Trộn và kết hợp nếu cần, hoặc xây dựng của riêng bạn.

Căn chỉnh theo chiều ngang

Thay đổi căn chỉnh ngang của điều hướng bằng tiện ích flexbox . Theo mặc định, các nav được căn trái, nhưng bạn có thể dễ dàng thay đổi chúng thành căn giữa hoặc căn phải.

Căn giữa bằng . justify-content-center :

  

& lt; ul

class =

"nav justify-content-center"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Đang hoạt động

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Căn phải với . justify-content-end :

  

& lt; ul

class =

"nav justify-content-end"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Dọc

Xếp chồng điều hướng của bạn bằng cách thay đổi hướng mục linh hoạt với tiện ích . flex-column . Cần xếp chúng trên một số khung nhìn chứ không phải những khung nhìn khác? Sử dụng các phiên bản đáp ứng (ví dụ: . Flex-sm-column ).

  

& lt; ul

class =

"nav flex-column"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Như mọi khi, có thể điều hướng dọc mà không cần & lt; ul & gt; cũng vậy.

  

& lt; nav

class =

"nav flex-column"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / nav & gt;

Tab

Sử dụng điều hướng cơ bản từ phía trên và thêm lớp . nav-tabs để tạo giao diện theo thẻ. Sử dụng chúng để tạo các vùng có thể lập tab bằng plugin tab JavaScript của chúng tôi.

  

& lt; ul

class =

"nav nav-tabs"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Thuốc

Sử dụng cùng một HTML đó, nhưng thay vào đó hãy sử dụng . nav-Drugs :

  

& lt; ul

class =

"nav nav-thuốc"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Điền và căn đều

Buộc nội dung của . nav của bạn để mở rộng toàn bộ chiều rộng có sẵn một trong hai lớp bổ trợ. Để lấp đầy tất cả không gian có sẵn một cách tương ứng với . Nav-item s của bạn, hãy sử dụng . Nav-fill . Lưu ý rằng tất cả không gian theo chiều ngang đều bị chiếm dụng, nhưng không phải mọi mục điều hướng đều có cùng chiều rộng.

  

& lt; ul

class =

"nav nav-Drugs nav-fill"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết điều hướng dài hơn

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Khi sử dụng & lt; nav & gt; - điều hướng dựa trên, hãy đảm bảo bao gồm . nav-item trên neo.

  

& lt; nav

class =

"nav nav-Drugs nav-fill"

& gt;

& lt; a

class =

"nav-item nav-link active"

href =

"#"

& gt;

Đang hoạt động

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link"

< p class = "na"> href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link"

< p class = "na"> href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt; / a & gt;

& lt; / nav & gt;

Đối với các phần tử có chiều rộng bằng nhau, hãy sử dụng . nav-justified < / mã>. Tất cả không gian ngang sẽ bị chiếm bởi các liên kết điều hướng, nhưng không giống như . Nav-fill ở trên, mọi mục điều hướng sẽ có cùng chiều rộng.

  

& lt; nav

class =

"nav nav-Drugs nav-justified"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết điều hướng dài hơn

& lt; / a & gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / nav & gt;

Tương tự với ví dụ . nav-fill sử dụng điều hướng dựa trên & lt; nav & gt; , hãy đảm bảo bao gồm . nav-item trên neo.

  

& lt; nav

class =

"nav nav-Drugs nav-justified"

& gt;

& lt; a

class =

"nav-item nav-link active"

href =

"#"

& gt;

Đang hoạt động

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link"

< p class = "na"> href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link"

< p class = "na"> href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt; / a & gt;

& lt; / nav & gt;

Làm việc với các tiện ích flex

Nếu bạn cần các biến thể điều hướng đáp ứng, hãy cân nhắc sử dụng một loạt tiện ích flexbox . Mặc dù dài dòng hơn, nhưng các tiện ích này cung cấp khả năng tùy chỉnh cao hơn trên các điểm ngắt đáp ứng. Trong ví dụ bên dưới, điều hướng của chúng ta sẽ được xếp chồng lên điểm ngắt thấp nhất, sau đó điều chỉnh theo bố cục ngang lấp đầy chiều rộng có sẵn bắt đầu từ điểm ngắt nhỏ.

  

& lt; nav

class =

"nav nav-Drugs flex-column flex-sm-row"

& gt;

& lt; a

class =

"flex-sm-fill text-sm-center nav- liên kết hoạt động "

href =

" # "

& gt;

Hoạt động

& lt; / a & gt;

& lt; a

class =

"flex-sm-fill text-sm-center nav- liên kết "

href =

" # "

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"flex-sm-fill text-sm-center nav- liên kết "

href =

" # "

& gt;

Liên kết

& lt; / a & gt;

& lt; a

class =

"flex-sm-fill text-sm-center nav- liên kết bị vô hiệu hóa "

href =

" # "

& gt;

Đã tắt

& lt; / a & gt;

& lt; / nav & gt;

Về khả năng tiếp cận

Nếu bạn đang sử dụng navs để cung cấp thanh điều hướng, hãy nhớ thêm role = "navigation" vào vùng chứa mẹ hợp lý nhất của & lt; ul & gt; hoặc bọc phần tử & lt; nav & gt; xung quanh toàn bộ điều hướng. Không thêm vai trò vào chính & lt; ul & gt; , vì điều này sẽ khiến nó không được công bố là danh sách thực tế bởi các công nghệ hỗ trợ.

Lưu ý rằng các thanh điều hướng, ngay cả khi được tạo kiểu trực quan dưới dạng các tab với lớp . nav-tabs , không được cung cấp role = "tablist" , role = "tab" hoặc role = " thuộc tính tabpanel ". Những điều này chỉ thích hợp cho các giao diện được gắn thẻ động, như được mô tả trong Thực tiễn về tác giả của WAI ARIA . Xem hành vi JavaScript để biết ví dụ về giao diện được gắn thẻ động trong phần này.

Sử dụng trình đơn thả xuống

Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .

Tab có trình đơn thả xuống

  

& lt; ul

class =

"nav nav-tabs"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item thả xuống"

& gt;

& lt; a

class =

"nav-link dropdown-toggle"

< p class = "na"> data-toggle =

"dropdown"

href =

" # "

role =

" button "

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Trình đơn thả xuống

& lt; / a & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Thuốc có danh sách thả xuống

  

& lt; ul

class =

"nav nav-thuốc"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

href =

"#"

& gt;

Hoạt động

& lt ; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item thả xuống"

& gt;

& lt; a

class =

"nav-link dropdown-toggle"

< p class = "na"> data-toggle =

"dropdown"

href =

" # "

role =

" button "

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Trình đơn thả xuống

& lt; / a & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

href =

"#"

& gt;

Liên kết

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt

& lt ; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

Hành vi JavaScript

Sử dụng plugin JavaScript tab — bao gồm nó riêng lẻ hoặc thông qua tệp bootstrap.js đã biên dịch — để mở rộng các tab và viên điều hướng của chúng tôi nhằm tạo các ngăn có thể tab của nội dung cục bộ, thậm chí thông qua menu thả xuống.

Nếu bạn đang tạo JavaScript của chúng tôi từ nguồn, thì nó yêu cầu use.js .

Giao diện theo thẻ động, như được mô tả trong Thực tiễn về tác giả WAI ARIA , yêu cầu role = "tablist" , role =" tab ", role =" tabpanel " aria - thuộc tính để truyền đạt cấu trúc, chức năng và trạng thái hiện tại của chúng cho người dùng công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình).

Lưu ý rằng giao diện theo thẻ động không được chứa menu thả xuống, vì điều này gây ra các vấn đề về khả năng sử dụng lẫn khả năng truy cập. Từ góc độ khả năng sử dụng, thực tế là phần tử trình kích hoạt của tab hiện đang hiển thị không hiển thị ngay lập tức (vì nó nằm bên trong menu thả xuống đã đóng) có thể gây ra nhầm lẫn. Từ quan điểm về khả năng tiếp cận, hiện không có cách hợp lý nào để ánh xạ loại cấu trúc này với một mô hình WAI ARIA tiêu chuẩn, có nghĩa là nó không thể dễ hiểu đối với người dùng công nghệ hỗ trợ.

Áo sơ mi thô có thể bạn chưa từng nghe nói về chúng là quần short jean Austin. Nesciunt đậu phụ stumptown aliqua, làm sạch tổng thể retro synth. Ria mép khuôn mẫu, williamsburg carles vegan helvetica. Reploynderit đồ tể retro keffiyeh dreamcatcher synth. Áo len Cosby eu banh mi, qui irure terry richardson ex mực. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan may mặc của Mỹ, butcher voluptate nisi qui.

Con locavore fixie trong xe tải thực phẩm, mực cà phê marfa nulla nguồn gốc đơn của accamus mcsweeney. Bài tập +1 khóa lao động, xà cạp PBR của blog sartorial cấp độ tiếp theo với nghệ nhân bốn người khi twee bia thủ công từ trang trại đến bàn ăn. Qui Photo Booth Letterpress, Commode Enim Craft Beer Mlkshk Aliquip Jean Shorts Ullamco Ad Vinyl Cillum PBR. Homo nostrud hữu cơ, giả định lao động thẩm mỹ magna delectus nhuyễn thể. Keytar Helvetica VHS Sage Yr, Vero Magna Velit Sapiente Labore Stumptown. Vegan Fanny Pack Audio Cillum Wes Anderson 8-Bit, Quần short Jean bền vững Râu ra DIY Ethical Culpa Terry Richardson Biodiesel. Art Party Scester stumptown, tumblr butcher vero sint, người hình xăm con rắn accamus echo công viên.

  

& lt; ul

class =

"nav nav-tabs"

id =

"myTab"

role = < / p>

"máy tính bảng"

& gt;

& lt; li

class =

"name-item"

& gt;

& lt; a

class =

"nav-link active"

data-toggle =

" tab "

reference =

"# home"

role =

"tab"

area-control =

"home"

area-select =

"true"

& gt;

Trang chủ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"name-item"

& gt;

& lt; a

class =

"nav-link"

id =

"profile-tab"

data-toggle =

"tab"

reference =

"# profile"

role =

"tab"

area-control =

"profile"

area-select =

"false"

& gt;

Hồ sơ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"name-item"

& gt;

& lt; a

class =

"nav-link"

id =

"contact-tab"

data-toggle =

"tab"

reference =

"# contact"

role =

"tab"

area-control =

"contact"

area-select =

"false"

& gt;

Liên hệ

& lt; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; div

class =

"tab-content"

id =

"myTabContent"

& gt;

& lt; div

class =

"tab-ngăn phai hiển thị hoạt động"

< p class = "in"> id =

"nhà"

role =

"bảng điều khiển tab"

area-labelcity =

"home-tab"

& gt ;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"profile"

role =

"tabpanel "

area-labelcity =

" profile-tab "

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"contact"

role =

"tabpanel "

area-labelcity =

" contact-tab "

& gt; ...

& lt; / div & gt;

& lt; / div & gt;

Để giúp phù hợp với nhu cầu của bạn, tính năng này hoạt động với đánh dấu dựa trên & lt; ul & gt; , như được hiển thị ở trên hoặc với bất kỳ đánh dấu “tự cuộn” nào tùy ý. Lưu ý rằng nếu bạn đang sử dụng & lt; name & gt; , bạn không nên thêm trực tiếp role = "tablist" vào nó, vì điều này sẽ ghi đè vai trò gốc của phần tử làm mốc điều hướng. Thay vào đó, hãy chuyển sang một phần tử thay thế (trong ví dụ bên dưới, một & lt; div & gt; ) đơn giản) và bọc & lt; name & gt ; xung quanh nó.

Trang chủ
Hồ sơ

Và ngoại lệ chính là công việc khó khăn khiến người khiếm thị muốn đến với người khiếm thị phải vất vả. Tha thứ là để tránh cho một linh hồn thấp như bất kỳ kết quả nào sẽ bỏ qua, hiện tại có một nỗi đau trong tâm hồn. Velit non irure adipisicing alimco irure incidindus irure non esse consectetur nostrud minim non minim Blindeat. Amet duis làm, nhưng dus sẽ không đến Tập thể dục nhẹ nhàng là có lỗi, nhưng anh không trách em đau. Bài tập về nhà buộc tội người da đen có tâm trí khu học chánh làm mù nhà ở

Không có khu học chánh nào để đổ lỗi cho các dịch vụ vận chuyển không đảm bảo. Họ là một công việc tuyệt vời với sự chăm chỉ và một bài tập lặp đi lặp lại. Nhiệm vụ của chúng ta không phải là tránh tập thể dục, không thèm tập thể dục, tránh tập thể dục. Commodo esse dolor fugiat sint velit aliquamco magna hadat voluptua minim amet aliquip ipsum aute job nisi. Tôi xin lỗi vì công việc khó khăn mà tôi đang làm với kết quả không ổn định, nó làm dịu đi nỗi đau lớn, đây mong rằng đây là thời gian tuyệt vời để xoa dịu nỗi bất an. Nỗi đau của sự sung sướng không gì khác chính là tình yêu

  

& lt; nav & gt;

& lt; div

class =

"nav nav-tabs"

id =

"nav-tab"

role =

"tablist"

& gt;

& lt; a

class =

"nav-item nav-link active"

id =

"nav-home-tab"

data-toggle =

< p> p class = "s"> "tab"

href =

"# nav-home"

role =

"tab"

aria-control =

"nav-home"

aria-select =

"true"

& gt ; Trang chủ

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link"

< p class = "na"> id =

"nav-profile-tab"

data-toggle =

"tab"

href =

"# nav-profile"

role =

" tab "

aria-control =

" nav -profile "

aria-select =

" false "

& gt; p> Hồ sơ

& lt; / a & gt;

& lt; a

class =

"nav-item nav-link"

< p class = "na"> id =

"nav-contact-tab"

data-toggle =

"tab"

href =

"# nav-contact"

role =

" tab "

aria-control =

" nav -contact "

aria-select =

" false "

& gt; Liên hệ

& lt; / a & gt;

& lt; / div & gt;

& lt; / nav & gt;

& lt; div

class =

"tab-content"

"nav-tabContent"

& gt;

& lt; div

class =

"tab-ngăn phai hiển thị hoạt động"

< p class = "na"> id =

"nav-home"

role =

aria-labellingby =

" nav-home-tab "

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"nav-profile"

role =

"tabpanel"

aria-labellingby =

"nav-profile-tab"

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"nav-contact"

role =

"tabpanel"

aria-labellingby =

"nav-contact-tab"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Plugin tab cũng hoạt động với thuốc viên.

Bạn không thể làm mù khu học chánh vui vẻ. Tránh muốn tiết lộ các mục tiêu trừ khi chúng không thực hiện được. Irure magna elit goodso animam ex pardoni culpa eiusmod id nosturd sit desireatat in pardon ad. Loại hậu quả này là do lỗi của người ngoại lệ, người Người da đen nên tập thể dục tốt, hãy kiểm tra sức sống của chúng ta.

Để tạo ra bài tập hiệu quả của chúng tôi, nó tự làm dịu lỗi và ưu điểm sẽ làm dịu nó. Tuy nhiên, rất nhiều ưu điểm như giá rẻ nhưng các nhà sản xuất không vì thế mà bỏ rơi. Mục tiêu của bài tập tăng khoái cảm này càng thấp càng tốt khi họ cảm thấy thoải mái. Nó là tuyệt vời cho những người không muốn không đau đớn và từ bỏ liệu pháp tập thể dục tự động. Hoạt hình id lao động elitis adipisicing ut trong id Blindis pariesur ut schoolmco ea tempor duis.

  

& lt; ul

class =

"nav nav-Drugs mb-3"

id =

"Drugs-tab"

role =

" tablist "

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

id =

"Drugs-home-tab"

data-toggle =

href =

"# thuốc-nhà"

role =

"tab"

aria-control =

"Drugs-home"

aria-select =

"true"

& gt;

Trang chủ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"Drugs-profile-tab"

data-toggle =

" thuốc "

href =

" # thuốc-hồ sơ "

role =

"tab"

aria-control =

"Drugs-profile"

aria-select =

"false"

& gt;

Hồ sơ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"Drugs-contact-tab"

data-toggle =

" thuốc "

href =

" # thuốc-contact "

role =

"tab"

aria-control =

"Drugs-contact"

aria-select =

"false"

& gt;

Liên hệ

& lt; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; div

class =

"tab-content"

id =

"Drugs-tabContent"

& gt;

& lt; div

class =

"tab-ngăn phai hiển thị hoạt động"

< p class = "na"> id =

"Drugs-home"

role =

aria-labellingby =

" Drugs-home-tab "

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"Drugs-profile"

role =

"tabpanel"

aria-labellingby =

"Drugs-profile-tab"

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"Drugs-contact"

role =

"tabpanel"

aria-labellingby =

"Drugs-contact-tab"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Và với những viên thuốc dọc.

Trang chủ
Hồ sơ
Tin nhắn
Cài đặt

Nó khiến khu học chánh của chúng ta mù quáng đến mức mỗi khi chúng ta muốn loại bỏ điều gì đó ra khỏi tâm trí của mình. Tôi sẽ là người ngoại lệ duy nhất phải làm một công việc tuyệt vời. Điều đáng phê phán là công việc của một số người da đen muốn trở thành một ngoại lệ trong những cuộc đấu tranh xoa dịu nỗi đau đó. Bản thân nỗi đau sẽ khiến bạn cảm thấy thích thú, và niềm vui ít lên án bạn nhất, sẽ xoa dịu kết quả. Vì họ không từ bỏ công sức của mình, và từ bỏ những vụn sữa, nên ít nhất hãy bịt mắt họ.

Có lỗi là ta thống khổ khoái cảm lao lực đích trách cứ thấp kém như vậy kết quả ôn nhu, nhưng kết quả cường đại lại đề cao. Eu sẽ đến, không phải vì vậy mà nỗi đau sẽ bỏ rơi hàng hóa, và ít nhất nó sẽ đến với chính bất kỳ công việc lao động nào. Ai phải là ngoại lệ chính đối với các dịch vụ adipisic. Để đảm bảo rằng các mục tiêu và yêu cầu của công việc được thành công. Trường học nào làm dịu đi và che khuất nỗi đauĐể nỗi đau nào thoát khỏi mặc cảm của một tâm hồn như vậy, excepteur muốn siêu thoát, nhưng những người phải chịu nỗi đau lớn. Lưu ý đến việc cung cấp việc làm cho khu học chánh Xin lưu ý rằng tôi cung cấp cho họ thời gian để tập trung vào và cung cấp các dịch vụ khách hàng. Anh ấy nhận thấy có lỗi với mục tiêu của lao động, đó là một lợi thế lớn mà nó sẽ được nâng cao.

Eu đau rằng nỗi đau là bất kỳ nỗi đau nào mà khách hàng mong muốn ngoại trừ những vấn đề chính mà nỗi đau đó sẽ cung cấp trong các dịch vụ được mong muốn. Niềm vui ngoại lệ hàng hóa lao động nisi cillum duis cái gì đó. Một số tình yêu làm dịu đi cái chính, không ai muốn đam mê cái gì đó làm dịu đi, nhưng đó là những gì họ sẽ làm. Lỗi của bất kỳ khu học chánh nào là việc thực hiện các dịch vụ đó là một nỗ lực cố gắng trừ khi tận dụng được lợi thế của nó kịp thời.

  

& lt; div

class =

"nav flex-column nav-Drugs"

id =

"v-Drugs-tab"

role =

"tablist"

aria-direction =

" dọc "

& gt;

& lt; a

class =

"nav-link active"

id =

"v-Drugs-home-tab"

data-toggle =

"tablet"

href =

"# v-Drugs-home"

role =

"tab"

aria-control =

"v-Drugs-home"

aria-select =

"true"

& gt;

Trang chủ

& lt; / a & gt;

& lt; a

class =

"nav-link"

id =

"v-Drugs-profile-tab"

data-toggle =

"thuốc"

href =

"# v-Drugs-profile"

role =

"tab"

aria-control =

" v-Drugs-profile "

aria-select =

" false "

& gt ;

Hồ sơ

& lt; / a & gt;

& lt; a

class =

"nav-link"

id =

"v-Drugs-messages-tab"

data-toggle =

"thuốc viên"

href =

"# v-thuốc-tin nhắn"

role =

"tab"

aria-control =

" v-thuốc-tin nhắn "

aria-select =

" false "

& gt ;

Tin nhắn

& lt; / a & gt;

& lt; a

class =

"nav-link"

id =

"v-Drugs-settings-tab"

data-toggle =

"thuốc"

href =

"# v-Drugs-settings"

role =

"tab"

aria-control =

" v-Drugs-settings "

aria-select =

" false "

& gt ;

Cài đặt

& lt; / a & gt;

& lt; / div & gt;

& lt; div

class =

"tab-content"

id =

"v-Drugs-tabContent"

& gt;

& lt; div

class =

"tab-ngăn phai hiển thị hoạt động"

< p class = "na"> id =

"v-Drugs-home"

role =

"tabpanel"

aria-labellingby =

"v-Drugs-home-tab"

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"v-Drugs-profile"

role =

aria-labellingby =

" v-Drugs-profile-tab "

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"v-thuốc-tin nhắn"

role =

aria-labellingby =

" v-Drugs-messages-tab "

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"v-Drugs-settings"

role =

aria-labellingby =

" v-Drugs-settings-tab "

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Sử dụng thuộc tính dữ liệu

Bạn có thể kích hoạt điều hướng tab hoặc máy tính bảng mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định data-toggle = "tab" hoặc data-toggle = "tablet" trên một phần tử. Sử dụng các thuộc tính dữ liệu này trên . Nav-tabs hoặc . Nav-Drugs .

  

& lt;! - Các tab điều hướng - & gt;

& lt; ul

class =

"nav nav-tabs"

id =

"myTab"

role =

"tablist "

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

id =

"home-tab"

data-toggle =

" tab "

href =

" # home "

role = < / p>

"tab"

aria-control =

"home"

< p class = "na"> aria-select =

"true"

& gt;

Trang chủ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"profile-tab"

data-toggle =

"tab"

href =

"# profile"

role =

"tab"

aria-control =

"hồ sơ"

aria-select =

"false"

& gt;

Hồ sơ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"messages-tab"

data-toggle =

"tab"

href =

"# tin nhắn"

role =

"tab"

aria-control =

"tin nhắn"

aria-select =

"false"

& gt;

Tin nhắn

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"settings-tab"

data-toggle =

"tab"

href =

"# cài đặt"

role =

"tab"

aria-control =

"cài đặt"

aria-select =

"false"

& gt;

Cài đặt

& lt; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt;! - Ngăn tab - & gt;

& lt; div

class =

"tab-content"

& gt;

& lt; div

class =

"tab-pane hoạt động"

id =

"nhà"

role =

"tabpanel "

aria-labellingby =

" home-tab "

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-pane"

id =

"hồ sơ"

role =

"tabpanel"

aria-labellingby =

"profile-tab"

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-pane"

id =

"tin nhắn"

role =

"tabpanel"

aria-labellingby =

"messages-tab"

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-pane"

id =

"cài đặt"

role =

"tabpanel"

aria-labellingby =

"settings-tab"

& gt; ...

& lt; / div & gt;

& lt; / div & gt;

Qua JavaScript

Bật các tab có thể lập bảng qua JavaScript (mỗi tab cần được kích hoạt riêng lẻ):

  

$

(

'# myTab a '

).

on

(

'click'

,

function

(

e

)

{

e

.

PreventDefault

() < / p>

$

(

this

). < / p>

tab

(

'show'

)

})

Bạn có thể kích hoạt các tab riêng lẻ theo một số cách:

  

$

(

'# myTab a [href = "# profile"] '

).

tab

(

'show'

)

// Chọn tab theo tên

$

(

'# myTab li: first-child a'

).

tab

(

'show' < / p>

)

// Chọn tab đầu tiên

$

(

'# myTab li: last-child a'

).

tab

(

'show' < / p>

)

// Chọn tab cuối cùng

$

(

'# myTab li: nth-child (3) a'

).

tab

(

' hiển thị '

)

// Chọn tab thứ ba

Hiệu ứng mờ dần

Để làm cho các tab mờ dần, hãy thêm . fade vào mỗi . tab-pane . Ngăn tab đầu tiên cũng phải có . Show để hiển thị nội dung ban đầu.

  

& lt; div

class =

"tab-content"

& gt;

& lt; div

class =

"tab-ngăn phai hiển thị hoạt động"

< p class = "na"> id =

"nhà"

role =

"tabpanel"

aria-labellingby =

"home-tab"

& gt;

...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"hồ sơ"

role =

"tabpanel "

aria-labellingby =

" profile-tab "

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"tin nhắn"

role =

"tabpanel "

aria-labellingby =

" messages-tab "

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-panel phai"

id =

"cài đặt"

role =

"tabpanel "

aria-labellingby =

" settings-tab "

& gt; ...

& lt; / div & gt;

& lt; / div & gt;

Phương thức

Phương thức và chuyển đổi không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, lệnh gọi phương thức trên thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.

tab $ ().

Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có data-target hoặc href nhắm mục tiêu một nút vùng chứa trong DOM.

  

& lt; ul

class =

"nav nav-tabs"

id =

"myTab"

role = < / p>

"tablist"

& gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link active"

id =

"home-tab"

data-toggle =

" tab "

href =

" # home "

role = < / p>

"tab"

aria-control =

"home"

< p class = "na"> aria-select =

"true"

& gt;

Trang chủ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"profile-tab"

data-toggle =

"tab"

href =

"# profile"

role =

"tab"

aria-control =

"hồ sơ"

aria-select =

"false"

& gt;

Hồ sơ

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"messages-tab"

data-toggle =

"tab"

href =

"# tin nhắn"

role =

"tab"

aria-control =

"tin nhắn"

aria-select =

"false"

& gt;

Tin nhắn

& lt; / a & gt;

& lt; / li & gt;

& lt; li

class =

"nav-item"

& gt;

& lt; a

class =

"nav-link"

id =

"settings-tab"

data-toggle =

"tab"

href =

"# cài đặt"

role =

"tab"

aria-control =

"cài đặt"

aria-select =

"false"

& gt;

Cài đặt

& lt; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; div

class =

"tab-content"

& gt;

& lt; div

class =

"tab-pane hoạt động"

id =

"nhà"

role =

"tabpanel "

aria-labellingby =

" home-tab "

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-pane"

id =

"hồ sơ"

role =

"tabpanel"

aria-labellingby =

"profile-tab"

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-pane"

id =

"tin nhắn"

role =

"tabpanel"

aria-labellingby =

"messages-tab"

& gt; ...

& lt; / div & gt;

& lt; div

class =

"tab-pane"

id =

"cài đặt"

role =

"tabpanel"

aria-labellingby =

"settings-tab"

& gt; ...

& lt; / div & gt;

& lt; / div & gt;

& lt; script & gt;

$

(

function

() < / p>

{

$

(

'# myTab li: last-child a'

).

tab

(

'show' < / p>

)

})

& lt; / script & gt;

. tab (‘show’)

Chọn tab đã cho và hiển thị ngăn được liên kết với nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và ngăn liên kết của nó bị ẩn. Quay lại trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi sự kiện show.bs.tab xảy ra).

  

$

(

'# someTab '

).

tab

(

'show'

)

. tab (‘vứt bỏ’)

Hủy tab của phần tử.

Sự kiện

Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:

  1. hide.bs.tab (trên tab đang hoạt động hiện tại)
  2. show.bs.tab (trên tab được hiển thị)
  3. hidden.bs.tab (trên tab hoạt động trước đó, tab tương tự như đối với hide.bs.tab sự kiện)
  4. shows.bs.tab (trên tab vừa hiển thị mới hoạt động, tab giống như cho hiển thị sự kiện .bs.tab )

Nếu không có tab nào hoạt động, thì hide.bs.tab hidden.bs.tab sự kiện sẽ không bị kích hoạt.

Loại sự kiện
Sự mô tả

show.bs.tab
Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab đang hoạt động và tab hoạt động trước đó (nếu có) tương ứng.

show.bs.tab
Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab đang hoạt động và tab hoạt động trước đó (nếu có) tương ứng.

hide.bs.tab
Sự kiện này kích hoạt khi một tab mới được hiển thị (và do đó tab đang hoạt động trước đó sẽ bị ẩn). Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab đang hoạt động hiện tại và tab sắp hoạt động mới, tương ứng.

hidden.bs.tab
Sự kiện này kích hoạt sau khi một tab mới được hiển thị (và do đó tab hoạt động trước đó bị ẩn). Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng.

  

$

(

'a [ data-toggle = "tab"] '

).

trên

(< / p>

'show.bs.tab'

,

hàm

(

e

)

{

e

.

target

// mới tab đã kích hoạt

e

.

RelatedTarget

// trước đó tab hoạt động

})


Xem thêm những thông tin liên quan đến chủ đề chuyển đổi menu thả xuống liên kết điều hướng

Tạo và cập nhật danh sách Menu thả xuống Google Form từ dữ liệu Google Sheet.

  • Tác giả: Tran Dinh
  • Ngày đăng: 2021-08-28
  • Đánh giá: 4 ⭐ ( 6734 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mail : Trandinh1802@gmail.com

HAMKOT Hướng dẫn sử dụng Bộ chuyển đổi USB 3.0 sang HDMI

  • Tác giả: vi.manuals.plus
  • Đánh giá: 4 ⭐ ( 2988 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn cách thử nghiệm bài viết trên Facebook để tăng chuyển đổi các chiến dịch

  • Tác giả: thecontandcompany.com
  • Đánh giá: 4 ⭐ ( 5812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng tôi sẽ chỉ cho mọi người cách thử nghiệm bài viết thông qua công cụ "Thử nghiệm bài đăng" của Facebook.

Bài 31: Thanh điều hướng ngang trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 3966 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ đi tìm hiểu cơ bản về thanh điều hướng ngang- Horizontal navigation bar để tạo menu điều hướng các mục chính cho website...

Menu thả xuống 30+ tập lệnh hữu ích để tăng cường điều hướng tiêu đề / Đồ họa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 3 ⭐ ( 1701 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Menu thả xuống (còn được gọi là menu kéo xuống) là một điều cần thiết trong hầu hết các thiết kế web. Nó đóng vai trò quan trọng trong việc tạo ra một người dùng hiệu quả và

Redirect và Navigation trang web

  • Tác giả: kythuatseo.net
  • Đánh giá: 5 ⭐ ( 2365 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyển hướng là một cách để đưa cả người dùng và công cụ tìm kiếm đến một URL khác với URL mà họ yêu cầu ban đầu Ba chuyển hướng được

Tài khoản liên kết trong Office 365 do 21Vianet điều hành

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 6464 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chủ đề này áp dụng cho Office 365 do 21Vianet điều hành tại Trung Quốc. Bài viết này hướng dẫn bạn cách thiết lập và quản lý các kết nối với tài khoản của mình.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm việc với XML và JavaScript - đọc xml từ javascript