如何使引導程序導航標題標題可編輯？

Question

我有引導nav-tabs與glphicon-pencil旁邊每個heading.On點擊鉛筆我需要使標題可編輯。

<ul class="nav nav-tabs"> 
     <li class="active"><span></span><a data-toggle="tab" href="#home">Home<span class="glyphicon glyphicon-pencil"></span></a></li> 
     <li><a data-toggle="tab" href="#menu1">Menu 1<span class="glyphicon glyphicon-pencil"></span></a></li> 
     <li><a data-toggle="tab" href="#menu2">Menu 2<span class="glyphicon glyphicon-pencil"></span></a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Some content.</p> 
     </div> 
     <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Some content in menu 1.</p> 
     </div> 
     <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Some content in menu 2.</p> 
     </div> 
    </div> 

小提琴here

Answer 1

如果你只是想要的內容進行編輯，你可以這樣做：

$(".glyphicon-pencil").click(function() { 
    $($(this).parent("a").attr("href")).attr("contenteditable", "true").focusout(function() { 
    $(this).removeAttr("contenteditable").off("focusout"); 
    }); 
}); 

上面的代碼將允許你編輯內容。

Here is the JSFiddle demo

如果你只是想在標題被編輯，那麼這是我會怎麼做它：

$(".glyphicon-pencil").click(function() { 
    var pen = $(this); 
    pen.css("visibility", "hidden"); 
    $(this).prev().attr("contenteditable", "true").focusout(function() { 
    $(this).removeAttr("contenteditable").off("focusout"); 
    pen.css("visibility", "visible"); 
    }); 
}); 

Here is the JSFiddle demo