记如何解决卡了两天的一个前端问题

问题：使用bootstrap的导航栏，然后进行跟浏览器一样的切换

效果如下图：

    //点击左侧标签栏将目标跳至右侧
    var cnt=false;//控制只removeClass一次
    var times=0;
    $("#leftStack ul").find("li").each(function(){
        $(this).click(function(){
            var name=$(this).find("a").text();
            times++;
            var flag=false;
            console.log("1times:"+times);
            //先取消右边所有焦点
            if(cnt==false){
                $('#ul1.nav>li').removeClass('active');
                cnt=true;//表示已经取消
            }
            //遍历右边，看是否已经有该tab，若有，则将该tab设为焦点
            $("#ul1 li").each(function(){
                var aName=$(this).find("a").text();
                if($(this).hasClass("active")){
                    console.log("alreadyhasactive1");
                }
                if(aName==name){
                    $(this).addClass('active');
                    flag=true;
                }
                if($(this).hasClass("active")){
                    console.log("hasactive2");
                }
            });
            //如果已经添加了焦点，则返回，不需要再遍历
            if(flag==true) {
                console.log("alreadyHasTabReturn");
                cnt=false;
                return;
            }
            //没有该tab。直接添加。
            if(name.length>18){
                $("#ul1").append('<li class="active" id="li2"><a href="##">'+name+'<span class="glyphicon glyphicon-remove-circle" id="close2"></span></a></li>');
                console.log("hasLi2"+$('#ul1 #li2').hasClass('active'));
                cnt=false;
                return;
            }else{  
                $("#ul1").append('<li class="active" id="li3"><a href="##">'+name+'<span class="glyphicon glyphicon-remove-circle" id="close3"></span></a></li>');
                $('#ul1 #li3').addClass('active');
                console.log("hasLi2"+$('#ul1 #li3').hasClass('active'));
                cnt=false;
                return;
            }
            console.log("testIfNotReturn");
            });

一开始的问题是将点击左边tab后右边弹出，但是，全部失去了焦点状态。调试时发现，总是右边导航栏有了左边对应点击的那一栏后，尽管有class=”active”，但是没有相应的焦点状态，然后找了很久没找出问题，后来想到会不会是之前的代码带来的影响，毕竟js还不熟，不知道许多代码会不会相互作用，于是往前看，看到个网上复制粘贴的代码，作用是点击右边的导航栏中的一栏，相应的切换焦点状态，代码如下：

$(document).ready(function () {
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');

});

});

之前复制粘帖时只是看到能用就行，没有去理解每个函数是什么意思，今天查了才知道：$(document).ready()的作用是在网页加载出来之前就执行该段js。然后里面的代码则是：ul下的li的点击事件。抱着试一试的态度将该段代码删除，自己重新写了代码。结果可行，点击左边栏，右边会出现相应的tab，并呈现焦点状态。还是不理解为啥，请知道的告诉我一声。这段代码也是我纠结的另一个地方，就是点击左边生成的右边tab，失去了点击事件。之前调试只是看了ul里面有没有新生成的li，看到有，就停手了，今天突发奇想，会不会是根本就没有点击事件呢？于是在自己写的代码中加入控制台输出语句，发现页面加载时ul中有的li才有点击事件，于是上网查，就有了下面的代码：

$("#ul1").on('click','li', function(){
        var name=$(this).find("a").text();
        var flag=true;      
        var times=1;
        $("#ul1 li").each(function(){
            if(flag==false)
                return false;
            console.log("working"+times);
            times++;
            if($(this).hasClass("active")){
                console.log("activeName:"+$(this).find("a").text());
                if($(this).find("a").text()==name){
                    console.log("yes")
                    return false;
                }
                else{
                    flag=false;
                    console.log("noAdding...");
                    $(this).removeClass("active");
                    return false;
                }
            }
        });
        if(flag==false){
            $(this).addClass("active");
        }
    });

注意，有些可能用的是$(“#ul li”).live(‘click’, function(){})。但是该方法在jquery1.9已经过时，现在用的是

$(#parentNode).on('click',"nodeYouClick",function(){});

到这里问题就解决了。所以不能偷懒，因为不知道怎么加断点所以要在一个个重要的步骤里加上控制台输出。其实有时候也觉得debug是灵感的问题。