masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial Bootstrap > teks badan

bootstrap tab 没有反应怎么办

藏色散人
Lepaskan： 2020-11-30 16:37:06
asal
2817 orang telah melayarinya

bootstrap tab没有反应的解决办法：首先找到bootstrap的tab切换核心代码；然后修改好按钮组和内容组即可。

bootstrap tab 没有反应怎么办

本教程操作环境：windows10系统、bootstrap3.0，本文适用于所有品牌的电脑。

推荐：《bootstrap视频教程》

使用bootstrap时踩到的一个坑(tab切换没有出现效果)

前几天使用bootstrap的导航标签页时遇到了个问题：

  首先，第一个tab按钮和第一个tab content部分是默认激活状态的。当我点击第二个tab按钮时就第二个tab content可以正常显示。但是，当我再次切换回第一个tab 按钮时，没有效果。查看了一下文档，发现两个

  • 都有class = "active"。

      最终发现原来是我的文档结构没有完全按照官方例子，按钮容器用的是

    而不是
      。

        最后，梳理一下，使用bootstrap的tab切换核心代码如下：

       

      <!-- 按钮组 -->
 <ul>
   <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
 
<!-- 内容组 -->
 <div class="tab-content">
   <div class="tab-pane active" id="home">...</div>
   <div class="tab-pane" id="profile">...</div>
   <div class="tab-pane" id="messages">...</div>
   <div class="tab-pane" id="settings">...</div>
 </div>
      Salin selepas log masuk

      Atas ialah kandungan terperinci bootstrap tab 没有反应怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    • Label berkaitan：
    bootstrap
    sumber：php.cn
    Artikel sebelumnya：html如何引用bootstrap Artikel seterusnya：bootstrap 如何取消自适应
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
    daripada 2024-04-06 21:58:04
    0
    1
    800
    Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
    daripada 2024-04-06 20:22:15
    0
    1
    454
    Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
    daripada 2024-04-06 12:53:11
    0
    1
    376
    Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
    daripada 2024-04-05 08:45:39
    0
    1
    3443
    Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...
    daripada 2024-04-04 22:16:18
    0
    1
    1450
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan