时间戳

首页 > 解决方案 > 为什么 bootstrap 3 选项卡无法正常工作？

twitter-bootstrap - 为什么 bootstrap 3 选项卡无法正常工作？

问题描述

我有这个标签

<

li><a href="#neFrom" data-toggle="tab"  class="btn nav-link" >الأخبار</a></li>
                <li><a href="#GallaryForm9" data-toggle="tab"  class="btn nav-link" >الصور</a></li>
                <li><a class="btn nav-link" href="#">الفيديو</a></li>

 <div class="tab-content clearfix">
                        <div id="GallaryForm9" class="tab-pane fade in active">
                            <div class="input-field col s12">
                                <input placeholder="" id="first_name" type="text" class="validate">
                                <label for="first_name">الموضوع الرئيسي</label>
                            </div>
                        </div>


                        <div id="neFrom" class="tab-pane fade in active">
                            <div class="input-field col s12">
                                <input placeholder="" id="first_name" type="text" class="validate">
                                <label for="first_name">الموضوع الرئيسي</label>
                            </div>
                            <div class="input-field col s12">
                                <textarea id="textarea1" class="materialize-textarea"></textarea>
                                <label for="textarea1">النص</label>
                            </div>
                            <div class="input-field col m2 s6">
                                <input placeholder="       /      / " id="first_name" type="text" class="datepicker validate">
                                <label for="first_name">التاريخ</label>
                            </div>
                            <div class="input-field col m2 s6">
                                <input id="timepicker_ampm_dark" class="timepicker" type="time">
                                <label for="timepicker_ampm_dark">الوقت</label>
                            </div>
                            <div class="col m8 s12"></div>
                        </div>
                    </div>

标签： twitter-bootstrap

解决方案

首先，你的问题缺乏细节。什么工作不正常？

然后，您的<li>...</li>项目应该被包装在一个<ul class="nav nav-tabs">作为bootstrap v3 文档中的官方示例

然后，小心使用 css 类in和 active，因为它们控制选项卡的显示行为。

然后，看看我的实现，我做了一些改变......不要忘记包含Jquery，因为引导程序需要它来做很多事情。

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
<html>
  <head>
    <title>My Site</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
  
    <ul id="myTabs" class="nav nav-tabs">
      <li role="presentation" class="active">
        <a id="neFrom-tab" href="#neFrom" aria-controls="neFrom" role="tab" data-toggle="tab" aria-expanded="True">الأخبار</a>
      </li>
      <li role="presentation">
        <a id="GallaryForm9-tab" href="#GallaryForm9" aria-controls="GallaryForm9" role="tab" data-toggle="tab" aria-expanded="False">الصور</a>
      </li>
    </ul>


     <div class="tab-content clearfix">
        <!-- FIRST TAB ACTIVE -->
        <div id="neFrom" role="tabpanel" class="tab-pane fade in active" aria-labelledby="neFrom-tab">
         <div class="input-field col s12">
           <input placeholder="" name="first_name" type="text" class="validate">
           <label for="first_name">الموضوع الرئيسي</label>
         </div>
         <div class="input-field col s12">
           <textarea name="textarea1" class="materialize-textarea"></textarea>
           <label for="textarea1">النص</label>
         </div>
         <div class="input-field col m2 s6">
           <input placeholder="       /      / " name="first_name" type="text" class="datepicker validate">
           <label for="first_name">التاريخ</label>
         </div>
         <div class="input-field col m2 s6">
           <input name="timepicker_ampm_dark" class="timepicker" type="time">
           <label for="timepicker_ampm_dark">الوقت</label>
         </div>
         <div class="col m8 s12"></div>
       </div>

       <!-- SECOND TAB : NOT ACTIVE -->
       <div id="GallaryForm9" role="tabpanel" class="tab-pane fade" aria-labelledby="GallaryForm9-tab">
         <div class="input-field col s12">
           <input placeholder="" name="first_name" type="text" class="validate">
           <label for="first_name">الموضوع الرئيسي</label>
         </div>
       </div>

    </div>
  </body>
</html>

StackOverflow 的演示片段没有按预期运行，所以我在 jsfiddle here中做了同样的事情。

最后，如果可能，您应该考虑迁移到 bootstrap v4。

推荐阅读