为jQuery选项卡动态创建html
Dynamically create html for jQuery tabs
我正在尝试编写一个页面,同时通过javascript创建几乎所有的html。我想在我的项目中使用jQuery选项卡。内容已创建,但选项卡未显示。这是CSS问题吗?
function buildDocument() {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = "";
var uList = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = '<a href="#tabs-1">One</a>';
li2.innerHTML = '<a href="#tabs-2">One</a>';
uList.appendChild(li1);
uList.appendChild(li2);
var t1 = document.createElement("div");
var t2 = document.createElement("div");
t1.id = "tabs-1";
t2.id = "tabs-2";
t1.innerHTML = "Tab1";
t2.innerHTML = "Tab2";
tabsContainer.appendChild(uList);
tabsContainer.appendChild(t1);
tabsContainer.appendChild(t2);
$( "#tabs" ).tabs();
}
以及HTML:
<!doctype html>
<html>
<head>
<script src="main.js"></script>
<script type="text/javascript" src="external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body onload="buildDocument();">
<div id="tabs">
</div>
</body>
</html>
我从他们的网站下载的jQuery文件在这里(一切都是默认的):http://jqueryui.com/download/
这就是我得到的
您的代码适用于我。
我的产品包括:
<链接href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css"rel="stylesheet"/><script src="http://code.jquery.com/jquery-1.11.3.js"><script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js">
function buildDocument() {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = "";
var uList = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = '<a href="#tabs-1">One</a>';
li2.innerHTML = '<a href="#tabs-2">One</a>';
uList.appendChild(li1);
uList.appendChild(li2);
var t1 = document.createElement("div");
var t2 = document.createElement("div");
t1.id = "tabs-1";
t2.id = "tabs-2";
t1.innerHTML = "Tab1";
t2.innerHTML = "Tab2";
tabsContainer.appendChild(uList);
tabsContainer.appendChild(t1);
tabsContainer.appendChild(t2);
$( "#tabs" ).tabs();
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<body onload="buildDocument();">
<div id="tabs">
</div>
</body>
DEMO
你的代码对我很好。我唯一改变的是:
<script type="text/javascript">
$(function(){
buildDocument();
})
</script>
而不是<body onload="buildDocument();"
>,但不是必需的。您必须从正确的url加载jqueryui内容。看看https://code.jquery.com/ui/适用于所有版本。
如果您包含jQuery,为什么不考虑缩短代码你的职能。
一个例子:
function buildDocument() {
var tabsContainer = $('#tabs');
tabsContainer.empty();
var linkOne = '<li><a href="#tabs-1">One</a></li>';
var linkTwo = '<li><a href="#tabs-2">One</a></li>';
var t1 ='<div id="tabs-1">Tab1</div>';
var t2 ='<div id="tabs-2">Tab2</div>';
tabsContainer.append('<ul>'+linkOne+linkTwo+'</ul>')
tabsContainer.append('<div>'+t1+t2+'</div>');
tabsContainer.tabs();
}
你也可以使用数组,比如:
var links=["tab-1","tab-2"];
var tabPg=["Tab1","Tab2"];
jquery-ui.css
是否正确加载?尝试谷歌托管库
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
如果jquery-ui.css
加载正确,您应该看到默认样式。还要确保您的HTML以正确的格式呈现为https://jqueryui.com/tabs/.
相关文章:
- 从Javascript和Php变量创建Html模板文档
- 为非列表项目创建HTML实时搜索
- 使用javascript动态创建html内容/元素
- 如何使用jQuery动态创建HTML输入
- 在 JQUERY 中创建 HTML 后,Jquery 方法不起作用
- 使用HTML标记中的JS变量在Javascript中动态创建HTML
- 如何使用jQuery和乘法行和列创建HTML表
- MVC 4:使用 JQUERY 和 PartViewResult 动态创建 HTML 文本框.如果代码是动态添加的,如何
- 如何将函数绑定到使用链接函数创建 HTML 的角度指令
- 我需要使用AngularJS从JSON文件创建HTML元素
- 从Ajax Arraybuffer响应类型创建HTML画布
- 创建HTML对象的Javascript与创建HTML字符串的比较
- 在动态创建html元素之后,是否可以触发事件
- 如何在动态创建html时实现分层标题组织
- 如何从输入到url的路径创建html文件
- 从sql server中用javascript创建HTML表
- 如何在表单中创建html元素,而无需重新加载页面
- 做全栈JavaScript框架在客户端或服务器上创建HTML
- 使用JQuery创建HTML父标记
- 在服务器端创建html元素VS将数据作为JSON获取,并使用javascript创建标签