يتم استخدام Tab $ () تقريبًا () بشكل عام للتبديل بين صفحات علامات التبويب وشظايا محتوى ارتباط الكبسولة ، أو للتنقل في الصفحة للمحتوى ذي الصلة:
<ul id = "mytab"> <li> <a href = "#home"> home </a> </li> <li> <a href = "#profile"> profile </a> </li> <li> <a href = "#messages"> الرسائل </a> id = "home"> ... </div> <div id = "profile"> ... </div> <div id = "messages"> ... </div> <div id = "settings"> ... </div> <script> $ (function () {$ ('#mytab a: last'). tab ('show') ؛ E.PreventDefault () ؛ // حظر سلوك القفز للرابط $ (هذا) .TAB ('show') ؛ // إظهار الرابط المحدد حاليًا والمحتوى المرتبط به)}) </script>بالإضافة إلى ذلك ، يمكنك أن يكون لديك طرق أكثر مرونة لتنشيط علامة تبويب محددة:
$ ('#mytab a [href = "#profile"]'). tab ('show') ؛ // SELECT TAB by name $ ('#mytab a: first'). tab ('show') ؛ // SELECT First Tab $ ('#mytab a: last'). tab ('show') ؛ // حدد علامة التبويب الأخيرة $ ('#mytab li: eq (2) a'). tab ('show') ؛شيء واحد يجب الإشارة إليه في الكود أعلاه هو أن العلامة A في كل LI يجب أن تحتوي على HREF =#ID ، والتي تشير إلى معرف المحتوى المقابل للرابط. إذا تم استخدام JavaScript لتبديل محتوى التنقل ، فليست هناك حاجة لإضافة بيانات toggle = 'علامة تبويب' إلى علامة A. بالطبع ، إذا كان كل رابط يستخدم هذه السمة ، فلا داعي لاستخدام JS لتنفيذها.