我必须 jsfiddles
下面是每个警告的完整代码
带标签的 HTML
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
</head>
<body>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div id="pane1">Tab1 content</div>
<div id="pane2">Tab2 content</div>
</div>
<script>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
test.css
body {
margin: 0;
padding:50px 80px;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
.panes div {
display:none;
padding:15px 10px;
border-top :1px solid #999;
height:500px;
font-size:14px;
background-color:#fff;
}
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
height:30px;
}
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
}
ul.tabs a {
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
}
ul.tabs a:active {
outline:none;
}
ul.tabs a:hover {
color:red;
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
font-size: 14px;
cursor:default !important;
color:#000 !important;
}
.panes .pane {
display:none;
}
#pane2 {
position: absolute;
top: 80px;
bottom: 10px;
left: 80px;
right: 10px;
}
嵌入 ACE 编辑器的 HTML
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
</head>
<body>
<div id="pane2">
function foo(items){
var x = "All this is syntax highlighted";
return x;
}
</div>
<script src="test.js"></script>
</body>
</html>
test.css - 相同
test.js
var editor = ace.edit("pane2");
editor.getSession().setUseWorker(false);
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/javascript");
所以，我的目标是将这两个页面合并为一个，第一个选项卡中有一些内容，第二个选项卡中应该有编辑器本身。当我按照下面的方式做时
带有选项卡的 HTML 和第二个选项卡中的 ACE 编辑器
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
</head>
<body>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div id="pane1">Tab1 content</div>
<div id="pane2">
function foo(items){
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
<script>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
<script src="test.js"></script>
</body>
</html>
test.css - 相同
test.js - 相同
然后选项卡 1 正确显示内容但选项卡 2 中没有编辑器。 This是非工作代码的 jsfiddle。
感谢任何提示、帮助和解决问题的现成代码。提前致谢。
最佳答案
你永远不应该像 .panes div {display:none}; 这样写 css:)
Ace 主要由 div 组成，这条规则隐藏了 Ace 中的所有内容。
您可以改用 .panes>.pane。
有关工作演示，请参阅 http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview
顺便说一下，您使用的 ace 版本很旧，请使用来自 jsdelivr 或 cdn.js 的较新版本或从 github 下载。
关于javascript - 将 ACE 编辑器嵌入选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21271487/