Hướng dẫn bootstrap navbar show hide div - bootstrap navbar hiển thị ẩn div

Tôi có một thanh điều hướng sử dụng các liên kết neo để kết nối với các div khác nhau. Tôi đã ẩn tất cả các div, nhưng tôi muốn chúng hiển thị dựa trên liên kết bạn nhấp.


  
  
  
     Home
     Overview
  
  






homepage with title here 



page 1

Tôi biết bạn có thể làm điều đó bằng cách sử dụng jQuery nhưng tôi không thể làm bất cứ điều gì hoạt động. Ngay bây giờ các div được đặt để hiển thị: Không có. 'Trang chủ' sẽ xuất hiện khi bạn tải trang web.

Đã hỏi ngày 26 tháng 3 năm 2014 lúc 16:57Mar 26, 2014 at 16:57

Nếu bạn muốn kiểm soát nó bằng jQuery ... hãy thử nó: //jsfiddle.net/luiggi/krgt6/

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Đã trả lời ngày 26 tháng 3 năm 2014 lúc 17:16Mar 26, 2014 at 17:16

LuiggiluiggiLuiggi

3583 Huy hiệu bạc12 Huy hiệu đồng3 silver badges12 bronze badges

Bạn có thể sẽ cần thêm một số loại CSS vào các liên kết neo để bạn có thể tìm thấy các kích hoạt cụ thể dễ dàng hơn.

Chỉ từ bộ nhớ, mã sẽ là một cái gì đó như thế này [giả sử các neo có tên lớp "Togglediv"].

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Đã trả lời ngày 26 tháng 3 năm 2014 lúc 17:01Mar 26, 2014 at 17:01

Tài liệu và các ví dụ cho tiêu đề điều hướng mạnh mẽ, phản ứng mạnh mẽ của Bootstrap, The Navbar. Bao gồm hỗ trợ thương hiệu, điều hướng, và nhiều hơn nữa, bao gồm hỗ trợ cho plugin sụp đổ của chúng tôi.

Làm thế nào nó hoạt động

Đây là những gì bạn cần biết trước khi bắt đầu với Navbar:

NAVBARS yêu cầu gói

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

7 với

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

8 để thu gọn đáp ứng và các lớp bảng màu.

Navbars và nội dung của chúng là chất lỏng theo mặc định. Sử dụng các thùng chứa tùy chọn để giới hạn chiều rộng ngang của chúng.
Sử dụng các lớp khoảng cách và tiện ích Flex của chúng tôi để kiểm soát khoảng cách và căn chỉnh trong các NAVBARS.
NAVBARS có phản hồi theo mặc định, nhưng bạn có thể dễ dàng sửa đổi chúng để thay đổi điều đó. Hành vi đáp ứng phụ thuộc vào plugin JavaScript sụp đổ của chúng tôi.

NAVBARS được ẩn theo mặc định khi in. Buộc chúng được in bằng cách thêm

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

9 vào

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

7. Xem lớp tiện ích hiển thị.

Đảm bảo khả năng truy cập bằng cách sử dụng phần tử


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action


          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

1 hoặc, nếu sử dụng một phần tử chung hơn như


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

2, hãy thêm


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

3 vào mọi thanh hải quân để xác định rõ ràng nó là một khu vực mang tính bước ngoặt cho người dùng công nghệ hỗ trợ.

Đọc về một ví dụ và danh sách các thành phần phụ được hỗ trợ.

Nội dung được hỗ trợ

Navbars đi kèm với hỗ trợ tích hợp cho một số ít các thành phần phụ. Chọn từ những điều sau khi cần thiết:


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled


    
      
      Search

4 cho công ty, sản phẩm hoặc tên dự án của bạn.


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

5 cho một điều hướng đầy đủ và nhẹ [bao gồm cả hỗ trợ cho các thả xuống].


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

6 để sử dụng với plugin sụp đổ của chúng tôi và các hành vi chuyển đổi điều hướng khác.


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

7 cho bất kỳ điều khiển và hành động biểu mẫu.


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

8 để thêm các chuỗi văn bản tập trung theo chiều dọc.


  Navbar
  
    
  

  
    
      
        Home [current]


      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

9 để nhóm và ẩn nội dung của Navbar bằng điểm dừng của cha mẹ.

Ở đây, một ví dụ về tất cả các thành phần phụ có trong một thanh điều hướng có chủ đề ánh sáng đáp ứng tự động sụp đổ tại điểm dừng



  Navbar




  Navbar

0 [lớn].


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

Ví dụ này sử dụng màu [



  Navbar




  Navbar

1] và khoảng cách [



  Navbar




  Navbar



  Navbar




  Navbar



  Navbar




  Navbar



  Navbar




  Navbar

5] Các lớp tiện ích.

Nhãn hiệu


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

4 có thể được áp dụng cho hầu hết các yếu tố, nhưng neo hoạt động tốt nhất vì một số yếu tố có thể yêu cầu các lớp tiện ích hoặc kiểu tùy chỉnh.

Thanh điều khiển NavbarNavbar



  Navbar




  Navbar

Thêm hình ảnh vào


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

4 có thể sẽ luôn yêu cầu các kiểu hoặc tiện ích tùy chỉnh để có kích thước phù hợp. Dưới đây là một số ví dụ để chứng minh.



  
    
    Bootstrap

Nav

Các liên kết điều hướng Navbar được xây dựng trên các tùy chọn



  Navbar




  Navbar

8 của chúng tôi với lớp sửa đổi riêng của chúng và yêu cầu sử dụng các lớp Toggler để tạo kiểu phản hồi thích hợp. Điều hướng trong Navbars cũng sẽ phát triển để chiếm càng nhiều không gian ngang càng tốt để giữ cho nội dung của bạn được sắp xếp an toàn.Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Các trạng thái hoạt động, với ____ 49 49 để chỉ ra trang hiện tại có thể được áp dụng trực tiếp cho các ____50 hoặc cha mẹ ngay lập tức của họ.


  Navbar
  
    
  
  
    
      
        Home [current]
      
      
        Features
      
      
        Pricing
      
      
        Disabled

Và bởi vì chúng tôi sử dụng các lớp cho NAV của chúng tôi, bạn có thể tránh được phương pháp dựa trên danh sách hoàn toàn nếu bạn muốn.


  Navbar
  
    
  
  
    
      Home [current]
      Features
      Pricing
      Disabled

Bạn cũng có thể sử dụng các thả xuống trong Navbar Nav của bạn. Các menu thả xuống yêu cầu một yếu tố gói để định vị, vì vậy hãy chắc chắn sử dụng các phần tử riêng biệt và lồng nhau cho

1 và

0 như hình dưới đây.


  Navbar
  
    
  
  
    
      
        Home [current]
      
      
        Features
      
      
        Pricing
      
      
        
          Dropdown link
        
        
          Action
          Another action
          Something else here

Các hình thức

Đặt các điều khiển hình thức và các thành phần khác nhau trong một chiếc Navbar với


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Căn chỉnh nội dung của các hình thức nội tuyến của bạn với các tiện ích khi cần thiết.

Thanh điều khiển

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Các nhóm đầu vào cũng hoạt động:

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Các nút khác nhau được hỗ trợ như một phần của các hình thức Navbar này, quá. Đây cũng là một lời nhắc nhở tuyệt vời rằng các tiện ích căn chỉnh dọc có thể được sử dụng để căn chỉnh các yếu tố có kích thước khác nhau.

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Chữ

NAVBARS có thể chứa các bit văn bản với sự trợ giúp của


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

8. Lớp này điều chỉnh căn chỉnh dọc và khoảng cách ngang cho các chuỗi văn bản.

Văn bản Navbar có phần tử nội tuyến

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Trộn và kết hợp với các thành phần và tiện ích khác khi cần thiết.

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Phối màu

Theo chủ đề Navbar chưa bao giờ dễ dàng hơn nhờ sự kết hợp của các lớp theo chủ đề và các tiện ích

6. Chọn từ

7 để sử dụng với màu nền ánh sáng hoặc

8 cho các màu nền tối. Sau đó, tùy chỉnh với các tiện ích

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Hộp đựng

Mặc dù nó không bắt buộc, bạn có thể bọc một thanh điều hướng trong



  
    
    Bootstrap

0 để tập trung nó trên một trang hoặc thêm một trang trong chỉ trung tâm nội dung của một chiếc Navbar hàng đầu cố định hoặc tĩnh.

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Khi container nằm trong thanh điều hướng của bạn, phần đệm ngang của nó được gỡ bỏ ở các điểm dừng thấp hơn so với lớp

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

8 được chỉ định của bạn. Điều này đảm bảo chúng tôi không tăng gấp đôi khi đệm không cần thiết trên các khung nhìn thấp hơn khi thanh điều hướng của bạn bị sụp đổ.

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Vị trí

Sử dụng các tiện ích vị trí của chúng tôi để đặt Navbars vào các vị trí không tĩnh. Chọn từ cố định lên trên cùng, cố định xuống phía dưới hoặc dính vào trên cùng [cuộn với trang cho đến khi nó đạt đến đỉnh, sau đó ở đó]. NAVBAR đã cố định sử dụng



  
    
    Bootstrap

2, có nghĩa là chúng đã rút ra từ dòng chảy bình thường của DOM và có thể yêu cầu CSS tùy chỉnh [ví dụ:



  
    
    Bootstrap

3 trên



  
    
    Bootstrap

4] để ngăn chặn sự chồng chéo với các yếu tố khác.

Cũng lưu ý rằng



  
    
    Bootstrap

5 sử dụng



  
    
    Bootstrap

6, được hỗ trợ đầy đủ trong mọi trình duyệt.
Bootstrap
5 uses
Bootstrap
6, which isn’t fully supported in every browser.

Mặc định

$[document].ready[function [] {
    $["li.home"].click[function [] {
        $["#home"].toggle[];
        $["#page1"].hide[];
    }];

    $["li.overview"].click[function [] {
        $["#page1"].toggle[];
        $["#home"].hide[];
    }];
}];

Đã sửa lỗi đầu

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Đã sửa lỗi dưới cùng

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Dính trên cùng

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Hành vi đáp ứng

NAVBARS có thể sử dụng các lớp


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search



  
    
    Bootstrap

8 và

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

8 để thay đổi khi nội dung của chúng sụp đổ sau một nút. Kết hợp với các tiện ích khác, bạn có thể dễ dàng chọn khi nào nên hiển thị hoặc ẩn các yếu tố cụ thể.

Đối với Navbars không bao giờ sụp đổ, hãy thêm lớp


  Navbar
  
    
  
  
    
      
        Home [current]
      
      
        Features
      
      
        Pricing
      
      
        Disabled

0 trên thanh Nav. Đối với Navbars luôn sụp đổ, don lồng thêm bất kỳ lớp


  Navbar
  
    
  
  
    
      
        Home [current]
      
      
        Features
      
      
        Pricing
      
      
        Disabled

0 nào.

Người chuyển đổi

Bộ chuyển đổi Navbar được liên kết trái theo mặc định, nhưng nếu họ tuân theo một yếu tố anh chị em như


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

4, họ sẽ tự động được căn chỉnh ở bên phải. Đảo ngược đánh dấu của bạn sẽ đảo ngược vị trí của bộ chuyển đổi. Dưới đây là ví dụ về các kiểu chuyển đổi khác nhau.

Không có


  Navbar
  
    
  

  
    
      
        Home [current]
      
      
        Link
      
      
        
          Dropdown
        
        
          Action
          Another action
          
          Something else here
        
      
      
        Disabled
      
    
    
      
      Search

4 được hiển thị trong điểm dừng thấp nhất:

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Với một tên thương hiệu được hiển thị ở bên trái và người chuyển đổi bên phải:

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Với một người chuyển đổi ở bên trái và tên thương hiệu ở bên phải:

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Nội dung bên ngoài

Đôi khi bạn muốn sử dụng plugin sụp đổ để kích hoạt nội dung ẩn ở nơi khác trên trang. Bởi vì plugin của chúng tôi hoạt động trên khớp


  Navbar
  
    
  
  
    
      
        Home [current]
      
      
        Features
      
      
        Pricing
      
      
        Disabled

4 và


  Navbar
  
    
  
  
    
      
        Home [current]
      
      
        Features
      
      
        Pricing
      
      
        Disabled

5, điều đó dễ dàng thực hiện!

Nội dung sụp đổ

Có thể chuyển đổi thông qua thương hiệu Navbar.

$['.ToggleDiv'].each[function[el]{
     var divId = $[el].attr["href"];
     $[el].click[function[]{
         $[divId].Toggle[];
     }];
}]

Làm thế nào có thể hiển thị ẩn div trên nút Nhấp vào trong bootstrap?

Bạn cần đảm bảo Div đích có ID. Bootstrap có một lớp "sụp đổ", điều này sẽ ẩn khối của bạn theo mặc định. Nếu bạn muốn div của bạn có thể thu gọn và được hiển thị theo mặc định, bạn cần thêm lớp "in" vào sự sụp đổ. Nếu không, hành vi chuyển đổi sẽ không hoạt động đúng.make sure the target div has an ID. Bootstrap has a class "collapse", this will hide your block by default. If you want your div to be collapsible AND be shown by default you need to add "in" class to the collapse. Otherwise the toggle behavior will not work properly.

Làm cách nào để làm cho bootstrap navbar sụp đổ?

Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có lớp = "navbar-toggler", data-toggle = "squalse" và data-Target = "#thetarget". Sau đó, bọc nội dung Navbar [liên kết, v.v.] bên trong một phần tử div với class = "thu gọn điều hướng kết hợp", tiếp theo là một ID phù hợp với mục tiêu dữ liệu của nút: "Thetarget".

Navbar Toggler trong bootstrap là gì?

Navbar chuyển đổi nhãn Bootstrap Thành phần Navbar được thiết kế cho phương pháp đầu tiên trên thiết bị di động.Do đó, Navbar hiển thị khi bị sụp đổ trên các thiết bị di động.Nó có thể được bật bằng một nút hamburger.Thật không may, các biểu tượng hamburger được chứng minh là kém hiệu quả và không thể sử dụng được.Thành phần chuyển đổi Navbar mở rộng mặc định.designed for mobile first approach. Therefore, the navbar renders as collapsed on mobile devices. It can be toggled by a hamburger button. Unfortunately, hamburger icons are proved to be less efficient and not very usable. Navbar Toggle component extends the default .

Làm cách nào để tạo ra một chiếc Navbar trong suốt?

Tạo một thanh điều hướng trong suốt rất dễ dàng - chỉ cần không thêm lớp màu .bg-* vào thanh điều hướng.Trong trường hợp này, thanh điều hướng sẽ lấy màu của màu nền của cha mẹ.don't add a color class . bg-* to the navbar. In this case, the Navbar will take the color of the parent's background color.