التنقل والتبويبات

<ul class="nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link disabled">معطل</a> </li> </ul>

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link disabled">معطل</a> </li> </ul>

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link disabled">معطل</a> </li> </ul>

<!-- الملء: تأخذ العناصر عرضًا متناسبًا --> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط تنقل أطول بكثير</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> </ul> <!-- التبرير: تأخذ العناصر عرضًا متساويًا --> <ul class="nav nav-pills nav-justified"> <li class="nav-item"> <a class="nav-link active" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط تنقل أطول بكثير</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> </ul>

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link disabled">معطل</a> </li> </ul> <!-- حبوب عمودية --> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">نشط</a> </li> <li class="nav-item"> <a class="nav-link" href="#">رابط</a> </li> </ul>

<!-- تبويبات التنقل --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">الرئيسية</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">الملف الشخصي</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab">اتصل</button> </li> </ul> <!-- ألواح التبويبات --> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel"> <p>محتوى الرئيسية يذهب هنا...</p> </div> <div class="tab-pane fade" id="profile" role="tabpanel"> <p>محتوى الملف الشخصي يذهب هنا...</p> </div> <div class="tab-pane fade" id="contact" role="tabpanel"> <p>محتوى الاتصال يذهب هنا...</p> </div> </div>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab">الرئيسية</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab">الملف الشخصي</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel"> محتوى الرئيسية... </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel"> محتوى الملف الشخصي... </div> </div>

<div class="row"> <div class="col-3"> <ul class="nav nav-pills flex-column" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#v-pills-home">الرئيسية</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" data-bs-toggle="pill" data-bs-target="#v-pills-profile">الملف الشخصي</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" data-bs-toggle="pill" data-bs-target="#v-pills-settings">الإعدادات</button> </li> </ul> </div> <div class="col-9"> <div class="tab-content"> <div class="tab-pane fade show active" id="v-pills-home"> محتوى الرئيسية... </div> <div class="tab-pane fade" id="v-pills-profile"> محتوى الملف الشخصي... </div> <div class="tab-pane fade" id="v-pills-settings"> محتوى الإعدادات... </div> </div> </div> </div>

// تهيئة التبويبات const triggerTabList = document.querySelectorAll('#myTab button'); triggerTabList.forEach(triggerEl => { const tabTrigger = new bootstrap.Tab(triggerEl); triggerEl.addEventListener('click', event => { event.preventDefault(); tabTrigger.show(); }); }); // عرض تبويب محدد const triggerEl = document.querySelector('#profile-tab'); bootstrap.Tab.getInstance(triggerEl).show(); // الاستماع لأحداث التبويب const tabEl = document.querySelector('button[data-bs-toggle="tab"]'); tabEl.addEventListener('shown.bs.tab', event => { console.log('تبويب جديد:', event.target); // التبويب المنشط حديثًا console.log('تبويب سابق:', event.relatedTarget); // التبويب النشط السابق });