Создание мастера с помощью Jquery

Question

HTML:

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"></div> 
    <div class="tab-pane" id="tab2"></div> 
    <div class="tab-pane" id="tab3"></div> 
</div> 


<ul class="pager wizard"> 
    <li class="previous"><a href="javascript:;">Previous</a> 
    </li> 
    <li class="next"><a href="javascript:;">Next</a> 
    </li> 
</ul> 

JQuery:

$(document).ready(function() { 
      $('ul.pager li').click(function(e) 
      { 
       var bname = $(this).attr("class"); 
       if(bname=='next'){ 
        var actdiv = $(".tab-content").find('.tab-pane,.active').attr("id"); 
        $('#'+actdiv).removeClass("active"); 
        var divs = actdiv.slice(-1); 
        console.log(parseInt(divs) + 1); 
        var nextdiv = '#tab'+(parseInt(divs) + 1); 
        //console.log(nextdiv); 
        $(".tab-content").find(nextdiv).addClass("active");  
       } else { 
        var actdiv = $(".tab-content").find('.tab-pane,.active').attr("id").slice(-1); 
        $(".tab-content").find('.tab-pane').removeClass("active"); 
        var prediv = 'tab'+(parseInt(actdiv) - 1); 
        console.log(prediv); 
        $(".tab-content").find(prediv).addClass("active"); 
       } 

      }); 
     }); 

Когда я нажимаю на следующий за первое время удалить активный класс из вкладки-1 и добавить активный класс на вкладку-2, но когда я снова нажимаю дальше, он застревает.

Что я делаю неправильно?

Answer 1

Попробуйте следующее: вы можете поместить два разных обработчика кликов для предыдущей и следующей кнопок. У вас мало сложной логики для вычисления следующей и предыдущей вкладки, и вы ошиблись при вычислении следующего/предыдущего идентификатора вкладки, используя .slice(). Вместо этого вы можете использовать ниже логику, см. Ниже код

$(document).ready(function(){ 
    $('ul.pager li.previous').click(function(e) 
    { 
     var $activeTab = $('div.tab-content div.tab-pane.active'); 
     //check if previous tab present 
     if($activeTab.prev('div.tab-pane').length > 0) 
     { 
     $activeTab.removeClass('active'); 
     $activeTab.prev('div.tab-pane').addClass('active'); 
     } 
    }); 

    $('ul.pager li.next').click(function(e) 
    { 
     var $activeTab = $('div.tab-content div.tab-pane.active'); 
     //check if next tab present 
     if($activeTab.next('div.tab-pane').length > 0) 
     { 
     $activeTab.removeClass('active'); 
     $activeTab.next('div.tab-pane').addClass('active'); 
     } 
    }); 

}); 

Answer 2

Я всегда верю в минимизированный код. Я вижу, что вы делаете много вычислений, чтобы получить целевую вкладку, которая должна быть активирована дальше. В jQuery есть довольно приличные методы выбора, которые помогут вам сделать это. Попробуйте код ниже:

$(document).ready(function() { 
 
    $(".pager").on("click", ">li", function(){ 
 
     var $activeTab = $(".active", ".tab-content"), 
 
      $target = $(this).hasClass("next") ? $activeTab.next() : $activeTab.prev(); 
 
     
 
     // 
 
    \t if($target.length){ 
 
      $activeTab.removeClass("active"); 
 
     \t $target.addClass("active"); 
 
     } 
 
    }); \t 
 
});

.tab-pane{ 
 
    display:none; 
 
    background: #EEE; 
 
    border: 1px solid #DDD; 
 
    padding: 20px; 
 
    text-align:center; 
 
} 
 

 
.tab-pane.active{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="tab-content"> 
 
\t <div class="tab-pane active" id="tab1"> tab 1      
 
\t </div> 
 
\t <div class="tab-pane" id="tab2"> tab 2 
 
\t </div> 
 
\t <div class="tab-pane" id="tab3"> tab 3 
 
\t </div> 
 
</div> 
 
<ul class="pager wizard"> 
 
\t <li class="previous"><a href="javascript:;">Previous</a></li> 
 
\t <li class="next"><a href="javascript:;">Next</a></li> 
 
</ul>

Вы можете сделать этот циркуляр с небольшим количеством изменения кода. Попробуйте это здесь: http://jsfiddle.net/ashishanexpert/zLg842ye/1/