Javascript制表系统

var编辑器；
window.addEventListener（'load'，函数（）{
var textarea=document.getElementById（“编辑器”）；
编辑器=CodeMirror.fromTextArea（textarea{
行号：对，
模式：“htmlmixed”，
tabSize:3，
值：'console.log（“你好，世界”）；'，
主题：“莫诺凯”，
});
})
window.addEventListener（'load'，函数（）{
$（文档）.ready（函数（）{
$（'tab1'）.css（'background-color'，'272822'）；
var active='tab1'；
var html_code='//html代码在这里；
var css_code='//css代码在这里；
var js_code='//js code在这里；
$（“#tab1”）.trigger（'click'）；
//制表系统
$（'.tab'）。单击（函数（）{
var currentvalue=editor.getValue（）；
如果（currentvalue！=“”）{
如果（活动==“表1”）{
html_代码=当前值；
}else if（活动==“tab2”）{
css_代码=当前值；
}else if（活动==“tab3”）{
js_代码=当前值；
}
}
active=$（this.attr（“id”）；
如果（活动==“表1”）{
编辑器.setValue（html_代码）；
}else if（活动==“tab2”）{
编辑器.setValue（css_代码）；
}else if（活动==“tab3”）{
编辑器.setValue（js_代码）；
}
$（'.tab'）.css（'background-color'，'352aa9'）；
$（this.css（'background-color'，'#272822'）；
})
$（'.compile'）。单击（函数（）{
警报（html\U代码+js\U代码+css\U代码）；
})
})
})

.tabs{
利润率最高：1%；
背景色：#fff；
显示器：flex；
}
.标签{
左侧填充：20px；
宽度：20%；
背景色：Š352aa9；
颜色：白色；
右边距：10px；
边界半径：5px5px0；
}
.选项卡：悬停{
光标：指针；
}

index.html
index.css
index.js
提交

我让它变得简单了一点，但它可以改进得更多，但我想让您了解在下面的演示中获取战利品的更改

演示

$（文档）.ready（函数（）{
变量编辑器；
var textarea=document.getElementById（“编辑器”）；
编辑器=CodeMirror.fromTextArea（textarea{
行号：对，
模式：“htmlmixed”
});
$（'tab1'）.css（'background-color'，'272822'）；
var active='tab1'；
var html_code='//html代码在这里；
var css_code='//css代码在这里；
var js_code='//js code在这里；
//制表系统
$（'.tab'）。单击（函数（）{
var currentvalue=editor.getValue（）；
如果（currentvalue！=“”）{
如果（活动==“表1”）{
html_代码=当前值；
}else if（活动==“tab2”）{
css_代码=当前值；
}else if（活动==“tab3”）{
js_代码=当前值；
}
}否则{
editor.setValue（html_代码）
}
active=$（this.attr（“id”）；
如果（活动==“表1”）{
编辑器.setValue（html_代码）；
}else if（活动==“tab2”）{
编辑器.setValue（css_代码）；
}else if（活动==“tab3”）{
编辑器.setValue（js_代码）；
}
$（'.tab'）.css（'background-color'，'#fff'）；
$（this.css（'background-color'，'#272822'）；
})
$（“#tab1”）.trigger（'click'）；
})

index.html
index.css
index.js
请考虑给我们HTML和CSS代码，这样帮助你会容易得多。@卡斯滕·VBOANDANSEN完成了。<代码>编辑器在代码中引用了什么？@ Castnl vvOndErsEn到代码镜像编辑器，它的textarea@CarstenLøvboAndersen你能为每个标签增加一个活值吗？非常感谢！救了我一天@没问题，嘿，但是如何获取当前选项卡的活动值？泰姆！在你切换选项卡之前它不会切换变量的值你在这里，兄弟？