問題：使用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是靈感的問題。