ಪಟ್ಟಿ ಗುಂಪುಗಳು ವಿಷಯದ ಸರಣಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಶಕ್ತಿಯುತವಾದ ಅಂಶವಾಗಿದೆ. ಒಳಗೆ ಯಾವುದೇ ವಿಷಯವನ್ನು ಬೆಂಬಲಿಸಲು ಅವುಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ ಮತ್ತು ವಿಸ್ತರಿಸಿ.
ಮೂಲ ಉದಾಹರಣೆ
ಅತ್ಯಂತ ಮೂಲಭೂತ ಪಟ್ಟಿಯ ಗುಂಪು ಪಟ್ಟಿ ಐಟಂಗಳು ಮತ್ತು ಸರಿಯಾದ ವರ್ಗಗಳೊಂದಿಗೆ ಕ್ರಮಿಸದ ಪಟ್ಟಿಯಾಗಿದೆ. ಅನುಸರಿಸುವ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಅಥವಾ ಅಗತ್ಯವಿರುವಂತೆ ನಿಮ್ಮ ಸ್ವಂತ CSS ನೊಂದಿಗೆ ಅದರ ಮೇಲೆ ನಿರ್ಮಿಸಿ.
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ಸಕ್ರಿಯ ವಸ್ತುಗಳು
ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಆಯ್ಕೆಯನ್ನು ಸೂಚಿಸಲು .activea ಗೆ ಸೇರಿಸಿ ..list-group-item
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ವಸ್ತುಗಳು
ಅದನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಂತೆ ತೋರಲು.disabled a ಗೆ ಸೇರಿಸಿ . ಕೆಲವು ಅಂಶಗಳು ತಮ್ಮ ಕ್ಲಿಕ್ ಈವೆಂಟ್ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ JavaScript ಅಗತ್ಯವಿರುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ (ಉದಾ, ಲಿಂಕ್ಗಳು)..list-group-item.disabled
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ಲಿಂಕ್ಗಳು ಮತ್ತು ಬಟನ್ಗಳು
ಸೇರಿಸುವ ಮೂಲಕ ಹೋವರ್, ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳೊಂದಿಗೆ ಕ್ರಿಯಾಶೀಲ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂಗಳನ್ನು ರಚಿಸಲು <a>s ಅಥವಾ s ಬಳಸಿ . ಸಂವಾದಾತ್ಮಕವಲ್ಲದ ಅಂಶಗಳಿಂದ ಮಾಡಿದ ಪಟ್ಟಿ ಗುಂಪುಗಳು ( s ಅಥವಾ s ನಂತಹ) ಕ್ಲಿಕ್ ಅಥವಾ ಟ್ಯಾಪ್ ವೆಚ್ಚವನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಈ ಹುಸಿ-ವರ್ಗಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತೇವೆ.<button>.list-group-item-action<li><div>
ಇಲ್ಲಿ ಪ್ರಮಾಣಿತ ತರಗತಿಗಳನ್ನು ಬಳಸದಿರಲು.btn ಮರೆಯದಿರಿ .
s ನೊಂದಿಗೆ , ನೀವು ವರ್ಗದ ಬದಲಿಗೆ ಗುಣಲಕ್ಷಣವನ್ನು <button>ಸಹ ಬಳಸಬಹುದು . ದುಃಖಕರವೆಂದರೆ, ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.disabled.disabled<a>
ಫ್ಲಶ್
.list-group-flushಪೋಷಕ ಕಂಟೇನರ್ನಲ್ಲಿ (ಉದಾಹರಣೆಗೆ, ಕಾರ್ಡ್ಗಳು) ಪಟ್ಟಿಯ ಗುಂಪಿನ ಐಟಂಗಳನ್ನು ಎಡ್ಜ್-ಟು-ಎಡ್ಜ್ ರೆಂಡರ್ ಮಾಡಲು ಕೆಲವು ಬಾರ್ಡರ್ಗಳು ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಸೇರಿಸಿ .
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಪೋರ್ಟಾ ಎಸಿ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಸಿ
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ಸಮತಲ
.list-group-horizontalಎಲ್ಲಾ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳಾದ್ಯಂತ ಲಂಬದಿಂದ ಅಡ್ಡಲಾಗಿ ಪಟ್ಟಿ ಗುಂಪಿನ ಐಟಂಗಳ ವಿನ್ಯಾಸವನ್ನು ಬದಲಾಯಿಸಲು ಸೇರಿಸಿ . .list-group-horizontal-{sm|md|lg|xl}ಪರ್ಯಾಯವಾಗಿ, ಆ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಪಟ್ಟಿಯ ಗುಂಪನ್ನು ಅಡ್ಡಲಾಗಿ ಮಾಡಲು ಸ್ಪಂದಿಸುವ ರೂಪಾಂತರವನ್ನು ಆಯ್ಕೆಮಾಡಿ min-width. ಪ್ರಸ್ತುತ ಸಮತಲ ಪಟ್ಟಿ ಗುಂಪುಗಳನ್ನು ಫ್ಲಶ್ ಪಟ್ಟಿ ಗುಂಪುಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ.
ಪ್ರೊಟಿಪ್: ಸಮತಲವಾಗಿರುವಾಗ ಸಮಾನ ಅಗಲದ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂಗಳನ್ನು ಬಯಸುವಿರಾ? ಪ್ರತಿ ಪಟ್ಟಿ ಗುಂಪಿನ ಐಟಂಗೆ ಸೇರಿಸಿ .flex-fill.
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಮೊರ್ಬಿ ಲಿಯೋ ರಿಸಸ್
ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳು
ಸ್ಥಿತಿಯ ಹಿನ್ನೆಲೆ ಮತ್ತು ಬಣ್ಣದೊಂದಿಗೆ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಶೈಲಿ ಮಾಡಲು ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ಸರಳ ಪ್ರಾಥಮಿಕ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಸರಳವಾದ ದ್ವಿತೀಯ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಒಂದು ಸರಳ ಯಶಸ್ಸಿನ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಒಂದು ಸರಳ ಅಪಾಯ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಒಂದು ಸರಳ ಎಚ್ಚರಿಕೆ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಒಂದು ಸರಳ ಮಾಹಿತಿ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಸರಳ ಬೆಳಕಿನ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಸರಳವಾದ ಡಾರ್ಕ್ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂ
ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳು ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ .list-group-item-action. ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ಇಲ್ಲದ ಹೋವರ್ ಶೈಲಿಗಳ ಸೇರ್ಪಡೆಯನ್ನು ಗಮನಿಸಿ. .activeರಾಜ್ಯವೂ ಬೆಂಬಲಿತವಾಗಿದೆ ; ಸಂದರ್ಭೋಚಿತ ಪಟ್ಟಿ ಗುಂಪಿನ ಐಟಂನಲ್ಲಿ ಸಕ್ರಿಯ ಆಯ್ಕೆಯನ್ನು ಸೂಚಿಸಲು ಅದನ್ನು ಅನ್ವಯಿಸಿ.
ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾ ಗೋಚರ ಪಠ್ಯ), ಅಥವಾ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.
ಬ್ಯಾಡ್ಜ್ಗಳೊಂದಿಗೆ
ಕೆಲವು ಉಪಯುಕ್ತತೆಗಳ ಸಹಾಯದಿಂದ ಓದದಿರುವ ಎಣಿಕೆಗಳು, ಚಟುವಟಿಕೆ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ತೋರಿಸಲು ಯಾವುದೇ ಪಟ್ಟಿ ಗುಂಪು ಐಟಂಗೆ ಬ್ಯಾಡ್ಜ್ಗಳನ್ನು ಸೇರಿಸಿ .
bootstrap.jsಸ್ಥಳೀಯ ವಿಷಯದ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಫಲಕಗಳನ್ನು ರಚಿಸಲು ನಮ್ಮ ಪಟ್ಟಿ ಗುಂಪನ್ನು ವಿಸ್ತರಿಸಲು ಟ್ಯಾಬ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿ-ಅದನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಅಥವಾ ಕಂಪೈಲ್ ಮಾಡಿದ ಫೈಲ್ ಮೂಲಕ ಸೇರಿಸಿ.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದು
ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯದೆಯೇ ಸರಳವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ data-toggle="list"ಅಥವಾ ಅಂಶದ ಮೇಲೆ ನೀವು ಪಟ್ಟಿ ಗುಂಪು ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು. ನಲ್ಲಿ ಈ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ .list-group-item.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ
JavaScript ಮೂಲಕ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಪಟ್ಟಿ ಐಟಂ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ (ಪ್ರತಿ ಪಟ್ಟಿ ಐಟಂ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುವ ಅಗತ್ಯವಿದೆ):
ನೀವು ವೈಯಕ್ತಿಕ ಪಟ್ಟಿ ಐಟಂ ಅನ್ನು ಹಲವಾರು ರೀತಿಯಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು:
ಫೇಡ್ ಪರಿಣಾಮ
ಟ್ಯಾಬ್ಗಳ ಪ್ಯಾನೆಲ್ ಫೇಡ್ ಇನ್ ಮಾಡಲು, .fadeಪ್ರತಿಯೊಂದಕ್ಕೂ ಸೇರಿಸಿ .tab-pane. ಮೊದಲ ಟ್ಯಾಬ್ ಫಲಕವು .showಆರಂಭಿಕ ವಿಷಯವನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡಬೇಕು.
ವಿಧಾನಗಳು
$().ಟ್ಯಾಬ್
ಪಟ್ಟಿ ಐಟಂ ಅಂಶ ಮತ್ತು ವಿಷಯ ಧಾರಕವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಟ್ಯಾಬ್ DOM ನಲ್ಲಿ ಕಂಟೈನರ್ ನೋಡ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವ data-targetಅಥವಾ ಹೊಂದಿರಬೇಕು.href
.tab('ಶೋ')
ನೀಡಿರುವ ಪಟ್ಟಿ ಐಟಂ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದರ ಸಂಯೋಜಿತ ಫಲಕವನ್ನು ತೋರಿಸುತ್ತದೆ. ಹಿಂದೆ ಆಯ್ಕೆ ಮಾಡಲಾದ ಯಾವುದೇ ಇತರ ಪಟ್ಟಿ ಐಟಂ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲಾಗಿಲ್ಲ ಮತ್ತು ಅದರ ಸಂಯೋಜಿತ ಫಲಕವನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ. ಟ್ಯಾಬ್ ಫಲಕವನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು ಕರೆ ಮಾಡುವವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, shown.bs.tabಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು).
ಕಾರ್ಯಕ್ರಮಗಳು
ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸುವಾಗ, ಈವೆಂಟ್ಗಳು ಈ ಕೆಳಗಿನ ಕ್ರಮದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ:
hide.bs.tab(ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ನಲ್ಲಿ)
show.bs.tab(ತೋರಿಸಬೇಕಾದ ಟ್ಯಾಬ್ನಲ್ಲಿ)
hidden.bs.tab(ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ನಲ್ಲಿ, hide.bs.tabಈವೆಂಟ್ನಂತೆಯೇ)
ಯಾವುದೇ ಟ್ಯಾಬ್ ಈಗಾಗಲೇ ಸಕ್ರಿಯವಾಗಿಲ್ಲದಿದ್ದರೆ, hide.bs.tabಮತ್ತು hidden.bs.tabಈವೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುವುದಿಲ್ಲ.
ಈವೆಂಟ್ ಪ್ರಕಾರ
ವಿವರಣೆ
show.bs.tab
ಈ ಈವೆಂಟ್ ಟ್ಯಾಬ್ ಶೋನಲ್ಲಿ ಫೈರ್ ಆಗುತ್ತದೆ, ಆದರೆ ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು. ಕ್ರಮವಾಗಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ (ಲಭ್ಯವಿದ್ದಲ್ಲಿ) ಅನ್ನು ಬಳಸಿ event.targetಮತ್ತು ಗುರಿಪಡಿಸಲು.event.relatedTarget
ತೋರಿಸಲಾಗಿದೆ.bs.tab
ಟ್ಯಾಬ್ ತೋರಿಸಿದ ನಂತರ ಈ ಈವೆಂಟ್ ಟ್ಯಾಬ್ ಶೋನಲ್ಲಿ ಫೈರ್ ಆಗುತ್ತದೆ. ಕ್ರಮವಾಗಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ (ಲಭ್ಯವಿದ್ದಲ್ಲಿ) ಅನ್ನು ಬಳಸಿ event.targetಮತ್ತು ಗುರಿಪಡಿಸಲು.event.relatedTarget
hide.bs.tab
ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸಬೇಕಾದಾಗ ಈ ಈವೆಂಟ್ ಫೈರ್ ಆಗುತ್ತದೆ (ಹಾಗಾಗಿ ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ). ಕ್ರಮವಾಗಿ ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹೊಸ ಶೀಘ್ರದಲ್ಲೇ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅನ್ನು ಬಳಸಿ event.targetಮತ್ತು ಗುರಿಪಡಿಸಲು.event.relatedTarget
Hidden.bs.tab
ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸಿದ ನಂತರ ಈ ಈವೆಂಟ್ ಫೈರ್ ಆಗುತ್ತದೆ (ಹೀಗಾಗಿ ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ). ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹೊಸ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅನ್ನು ಕ್ರಮವಾಗಿ ಬಳಸಿ event.targetಮತ್ತು ಗುರಿಪಡಿಸಲು.event.relatedTarget