Question

我的引导nav-tabs旁边有一个glphicon-pencil。点击铅笔我需要让标题可以编辑。

<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

如何使bootstrap nav-tabs标题可编辑？

1 个答案: