แท็บ Bootstrap nav: คลาสที่ใช้งานไม่ทำงาน

นี่คือโค้ด HTML:

<div class="process">
      <h2 style="text-transform: uppercase;">The Application Process</h2>
      <br><br>
      <div class="row">
        <div class="col-md-3" align="left">
          <ul class="nav nav-pills flex-column" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="/th#home" role="tab" aria-controls="home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="/th#profile" role="tab" aria-controls="profile">Profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="/th#messages" role="tab" aria-controls="messages">Messages</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="/th#settings" role="tab" aria-controls="settings">Settings</a>
            </li>
          </ul>              
        </div>
        <div class="col-md-9">
          <div class="tab-content">
            <div class="tab-pane active" id="home" role="tabpanel">a</div>
            <div class="tab-pane" id="profile" role="tabpanel">b</div>
            <div class="tab-pane" id="messages" role="tabpanel">c</div>
            <div class="tab-pane" id="settings" role="tabpanel">d</div>
          </div>
        </div>
      </div>
    </div>

และนี่คือรหัส JS:

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
  $('ul.nav-pills li a').click(function (e) {
    $('ul.nav-pills li.active').removeClass('active')
    $(this).parent('li').addClass('active')
  })
</script>

nav ที่มีคลาสที่ใช้งานอยู่คือ home nav แต่อย่างใดการตั้งค่าคือคลาสที่ใช้งานอยู่ ฉันพยายามค้นหาหลายครั้ง แต่ไม่พบคำตอบ

มันเป็นจาวาสคริปต์หรือคลาสคอนเทนเนอร์หรือไม่? เพราะฉันใช้คอนเทนเนอร์ก่อน div "กระบวนการ" แล้ว ขอบคุณ.


person Andre Christoga    schedule 26.05.2017    source แหล่งที่มา


คำตอบ (1)


หากคุณเพิ่ม bootstrap JS และกำจัดโค้ด JS ของคุณ มันควรจะใช้งานได้:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="process">
      <h2 style="text-transform: uppercase;">The Application Process</h2>
      <br><br>
      <div class="row">
        <div class="col-md-3" align="left">
          <ul class="nav nav-pills flex-column" id="myTab" role="tablist">
            <li class="nav-item active">
              <a class="nav-link" data-toggle="tab" href="/th#home" role="tab" aria-controls="home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="/th#profile" role="tab" aria-controls="profile">Profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="/th#messages" role="tab" aria-controls="messages">Messages</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="/th#settings" role="tab" aria-controls="settings">Settings</a>
            </li>
          </ul>              
        </div>
        <div class="col-md-9">
          <div class="tab-content">
            <div class="tab-pane active" id="home" role="tabpanel">a</div>
            <div class="tab-pane" id="profile" role="tabpanel">b</div>
            <div class="tab-pane" id="messages" role="tabpanel">c</div>
            <div class="tab-pane" id="settings" role="tabpanel">d</div>
          </div>
        </div>
      </div>
    </div>

หวังว่านี่จะช่วยได้ :)

person Migalys    schedule 26.05.2017