Untuk menambah barangan bar navigasi Bootstrap secara dinamik, anda boleh menggunakan JavaScript untuk menghasilkan elemen HTML dari sumber data dan memasukkannya ke dalam bekas .Navbar-Nav. Langkah-langkah khusus adalah seperti berikut: 1. Memahami struktur asas bar navigasi bootstrap, bahagian utama adalah

<ul class="navbar-nav">; 2. Buat array tempatan atau sumber data API yang mengandungi teks dan pautan; 3. Melangkah melalui data melalui JavaScript, buat <li> dan unsur -unsur untuk setiap item dan tambahkannya ke bar navigasi; 4. Secara pilihan mengendalikan keadaan pengaktifan atau tambahkan komponen yang lebih kompleks ke menu tarik turun; 5. Pastikan Bootstrap CSS dan Js dimuatkan untuk menyokong fungsi interaktif dan menguji tingkah laku responsif.

Menambah item secara dinamik ke navbar bootstrap menggunakan JavaScript adalah tugas yang sama apabila membina aplikasi web dinamik. Idea ini mudah: bukannya mengodkan item Navbar di HTML, anda menggunakan JavaScript untuk menghasilkannya berdasarkan beberapa data seperti API atau array tempatan.

Inilah cara anda boleh melakukannya dengan berkesan.

---

Memahami struktur navbar bootstrap

Sebelum melompat ke JavaScript, pastikan anda memahami struktur asas navbar bootstrap. Biasanya, ia kelihatan seperti ini:

 <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <div class = "container-fluid">
    <a class = "navbar-brand" href = "#"> jenama </a>
    <ul class = "Navbar-nav ME-Auto MB-2 MB-LG-0">
      <li class = "nav-item">
        <a class = "nav-link" href = "#"> home </a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#"> Mengenai </a>
      </li>
    </ul>
  </div>
</nav>

Bahagian utama untuk item dinamik ialah <ul class="navbar-nav"> -It yang mana pautan dinamik anda akan pergi.

---

Buat sumber data untuk item Navbar

Anda biasanya akan mendapatkan item Navbar anda dari sumber data. Untuk kesederhanaan, mari kita gunakan pelbagai JavaScript tempatan:

 const navitems = [
  {teks: "rumah", href: "#"},
  {teks: "kira -kira", href: "#about"},
  {teks: "perkhidmatan", href: "#services"},
  {teks: "hubungi", href: "#contact"}
];

Struktur ini mudah digunakan dan boleh ditukar kemudian jika anda menarik data dari API.

---

Gunakan JavaScript untuk memasukkan item ke Navbar

Sekarang anda mempunyai data, anda boleh melengkung dan membuat unsur -unsur HTML yang diperlukan secara dinamik.

Inilah cara anda melakukannya:

<ul><li> Pilih elemen <ul> di mana anda ingin memasukkan item<li> Gelung melalui array navItems<li> Buat <li> dan <a> elemen untuk setiap item<li> Tambahnya ke navbar

 const navlist = document.QuerySelector ('. navbar-nav');

navitems.foreach (item => {
  const li = document.createElement ('li');
  li.classname = 'nav-item';

  const a = document.createElement ('a');
  A.ClassName = 'nav-link';
  A.Href = item.href;
  A.TextContent = item.text;

  Li.Appendchild (A);
  Navlist.AppendChild (li);
});

Ini akan memasukkan setiap item ke dalam navbar sebagai item senarai baru dengan pautan di dalamnya.

Nota: Pastikan elemen .navbar-nav wujud di DOM sebelum skrip anda berjalan. Anda boleh meletakkan skrip di bahagian bawah halaman atau membungkusnya dalam pendengar acara DOMContentLoaded .

---

Mengendalikan keadaan aktif atau ciri lain (pilihan)

Jika anda mahukan salah satu item yang ditambah secara dinamik untuk mempunyai keadaan "aktif", anda boleh menambah kelas secara manual:

 jika (item.isaktif) {
  a.classlist.add ('aktif');
  A.SetAttribute ('Aria-arrent', 'Page');
}

Anda juga boleh menambah dropdowns atau komponen bootstrap lain secara dinamik, tetapi itu memerlukan mewujudkan struktur HTML yang lebih kompleks.

Berikut adalah contoh yang cepat untuk menambahkan dropdown (tanpa interaktiviti penuh kecuali bootstrap JS dimuatkan):

 const dropDownli = document.createElement ('li');
dropdownli.classname = 'nav-item dropdown';

const dropDownLink = document.createeLement ('a');
dropdownLink.classname = 'nav-link dropdown-toggle';
dropdownLink.href = '#';
DropDownLink.SetAttribute ('Data-Bs-Toggle', 'Dropdown');
DropDownLink.TextContent = 'More';

const dropdownMenu = document.createElement ('ul');
dropdownMenu.classname = 'dropdown-menu';

// Tambah item dropdown
const dropdownItems = [
  {teks: 'blog', href: '#blog'},
  {text: 'faq', href: '#faq'}
];

dropdownItems.Foreach (ditem => {
  const dli = document.createElement ('li');
  const dlink = document.createElement ('a');
  dlink.classname = 'dropdown-item';
  dlink.href = ditem.href;
  dLink.TextContent = ditem.Text;
  DLI.AppendChild (Dlink);
  DropdownMenu.AppendChild (DLI);
});

DropDownli.AppendChild (DropDownLink);
Dropdownli.AppendChild (DropdownMenu);
Navlist.AppendChild (DropDownli);

Ini menambah menu dropdown dengan dua item.

---

Nota akhir

<ul> <li> Pastikan CSS dan JS Bootstrap dimuatkan dengan betul jika anda menggunakan komponen interaktif seperti dropdowns. <li> Anda boleh mengambil item NAV dari API luaran dan bukannya menggunakan array statik. <li> Sentiasa menguji navbar dinamik anda dalam saiz skrin yang berbeza untuk memastikan ia berfungsi dengan betul dengan ciri -ciri responsif Bootstrap.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Bagaimana untuk menambahkan item secara dinamik ke navbar bootstrap dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!