Problem z dodaniem Bootstrap Tabs przy Angularze

Question

Siema mam pytanie, czemu nie dzialaja mi taby przy angularze a na stronie gdzie nie korzystam z frameworka to dziala??

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#customer_feedback" aria-controls="customer_feedback" role="tab" data-toggle="tab">Opinie klientów</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
          <p>1</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
          <p>2</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="customer_feedback">
          <p>3</p>
        </div>

Jak klikam to w urlu mam :
http://localhost:3000/user/profile#!#home

http://localhost:3000/user/profile#!#profile

http://localhost:3000/user/profile#!#customer_feedback

No i podpina sie tylko zakladki sie nie zmieniaja, standardowo jest na #home

Answer 1

zamiast a href daj a data-target, powinno dzialac

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a data-target="#customer_feedback" aria-controls="customer_feedback" role="tab" data-toggle="tab">Opinie klientów</a></li>
</ul>

 

Comments

Niestety teraz to sie nie da wgl wcisnać i nic sie nie zmienia

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a data-target="#customer_feedback" aria-controls="customer_feedback" role="tab" data-toggle="tab">Opinie klientów</a></li>
</ul>
 
<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    <p>1</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <p>2</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="customer_feedback">
    <p>3</p>
  </div>

 

---

dasz rade wstawic kod na jakiegos jsfiddle?

---

https://jsfiddle.net/oq5fkq5j/

 

Nie wiem jak musialbym controllery dawac itd narazie sama templatka