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");
               }

            });
        });

当我第一次点击下一个时，它会从tab-1中删除活动类并将活动类添加到tab-2但是当我再次点击下一个时它会卡住。

我做错了什么？

Answer 1

试试这个：你可以为前一个和下一个按钮放两个不同的点击处理程序。您没有复杂的逻辑来计算下一个和上一个选项卡，并且您错误地使用.slice()计算下一个/上一个选项卡ID。相反，您可以使用以下逻辑，请参阅下面的代码

$(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();
        
        //
    	if($target.length){
            $activeTab.removeClass("active");
        	$target.addClass("active");
        }
    });	
});

.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">
	<div class="tab-pane active" id="tab1">    tab 1                     
	</div>
	<div class="tab-pane" id="tab2">  tab 2
	</div>
	<div class="tab-pane" id="tab3">  tab 3
	</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>

您可以通过一点代码更改来完成此循环。请在此处尝试：http://jsfiddle.net/ashishanexpert/zLg842ye/1/

使用Jquery创建向导

2 个答案: