双击标签页组件中的li小标签或者section中的文本，可以对文本进行编辑。
为了实现这个功能，需要先给li和section元素绑定双击事件，当双击文本后，将文本改成一个文本框，用来输入新的内容，在文本框中显示原来的文本，并默认选定文本。
当文本框失去焦点，或者用户按下回车键以后，输人框中的值就会更新页面中原来的文本。
下面我们开始进行代码编写：
(1)在updateNode0方法中获取li中的span文本元素
具体代码如下：
updateNode(){.....(原有代码)this.spans=this.main.querySelectorA1l('.firstnavlispan:first-child');(2)在init()方法的for循环中给spans绑定双击事件，具体代码如下:for(vari=0;i<this.lis.length;i++){.....(原有代码)this.spans[i].ondblclick=function()that.editTab(this);};}(3)编写editTab0方法，实现双击文本后显示文本框的效果。先获取原来的文本，然后将文本替换为文本框，并在文本框中放人原来的文本。
具体代码如下：
editTab(el){varstr=el.innerHTML;el.innerHTML'<inputtype-"text">';varinput=el.children[0];input.value=str;input.select();//文本框中的文本全选}(4)为文本框绑定失去焦点事件和键盘事件，实现获取焦点或按回车键后提交修改。
具体代码如下：
editTab(el){....(原有代码)input.onblur=function(){//离开文本框后，修改标签页标题this.parentNode.innerHTML=this.value;}input.onkeyup=function(e){//按回车后修改标签页标题if(e.keyCode===13)this.blur();//触发blur事件，完成修改};}(5)在init(O的for循环中增加代码，让标签页的内容也可以修改。
代码如下：
for(vari=0;i<this.lis.length;i++){......(原有代码)this.sections[i].ondblclick=function(){that.editTab(this);};};(6)通过浏览器访问测试，观察双击文本后是否会自动变成一个文本框，并在文本框中显示原来的文本。
当输人完成后，按回车键，或者再单击一下其他位置，观察修改是否成功。