2014-01-21 4 views
1

http://bootply.com/107403вкладка самозагрузки не включается щелчком с JQuery

в JS

<script type="text/javascript"> 
    $('.stat-wrap a').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
</script> 

Я связать правильную связь с идентификатором, но все просто появился, ничего работы. боролся более 1 часа, но не решил. Помогите.

ответ

1

Вот рабочий пример с кодом: http://bootply.com/107407

Данные-тумблер = «закладка» атрибут должен быть на якоре, а не на делах.

<a href="#note-tab" data-toggle="tab"> 
     <div class="active"> 
      <div class="col-md-3 stat-text-wrap active"> 
       <p class="stat-number-desc">PRIVATE NOTES</p> 
      </div> 
     </div> 
    </a> 

    <a href="#quotes-tab" data-toggle="tab"> 
     <div> 
      <div class="col-md-3 stat-text-wrap"> 
       <p class="stat-number-desc">QUOTES</p> 
      </div> 
     </div> 
    </a> 

    <a href="#project-tab" data-toggle="tab"> 
     <div> 
      <div class="col-md-3 stat-text-wrap"> 
       <p class="stat-number-desc">PROJECTS DONE</p> 
      </div> 
     </div> 
    </a> 

    <a href="#skill-tab" data-toggle="tab"> 
     <div> 
      <div class="col-md-3 stat-text-wrap"> 
       <p class="stat-number-desc">NEW SKILLS</p> 
      </div> 
     </div> 
    </a> 

Также содержимое вкладки необходимо обернуть в контейнер с классом «содержимое вкладки».

<div class="tab-content"> 
    <div class="tab-pane active" id="note-tab"> 
     <input placeholder="NOTE What's on your mind?" class="status-input" type="text"> 
    </div> 

    <div class="tab-pane" id="quotes-tab"> 
     <input placeholder="QUOTE What's on your mind?" class="status-input" type="text"> 
    </div> 

    <div class="tab-pane" id="project-tab"> 
     <input placeholder="PROJECTWhat's on your mind?" class="status-input" type="text"> 
    </div> 

    <div class="tab-pane" id="skill-tab"> 
     <input placeholder="SKILLWhat's on your mind?" class="status-input" type="text"> 
    </div> 
</div> 
+0

Я вставляю ваш код в свой проект, он не работает .. lol – user3189052

1

Вы должны использовать data-toggle="tab" с якорем тегом, т.е., <a href="#note-tab"> как этот»<a href="#note-tab" data-toggle="tab">

Во-вторых обернуть ваше содержание вкладки в .tab-content так:

<div class="tab-content"> 
<div class="tab-pane active" id="note-tab"> 
    <input placeholder="NOTE What's on your mind?" class="status-input" type="text"> 
</div> 

<div class="tab-pane" id="quotes-tab"> 
    <input placeholder="QUOTE What's on your mind?" class="status-input" type="text"> 
</div> 

<div class="tab-pane" id="project-tab"> 
    <input placeholder="PROJECTWhat's on your mind?" class="status-input" type="text"> 
</div> 

<div class="tab-pane" id="skill-tab"> 
    <input placeholder="SKILLWhat's on your mind?" class="status-input" type="text"> 
</div> 

Надежда это помогает.

Спасибо, Zeshan

Смежные вопросы