gpt4 book ai didi

javascript - 如何通过 JQuery ui Tabs 来动态创建元素?

转载 作者:行者123 更新时间:2023-12-03 10:07:22 24 4
gpt4 key购买 nike

您好,我有以下 hml 页面。我需要将 jQuery ui Tabs 插件应用到动态添加的元素。我怎样才能得到那个。请注意,当我添加<li>时elements 作为字符串工作正常,但是当我使用 document.createElement 时它不起作用,相反,当我检查这些元素时,我得到相同的 html 结构

  <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http:/resources/demos/style.css">
</head>
<body>

<div id="tabs">
<ul>
<li><a href="#tabs0">Sample0</a></li>
</ul>
<div id="tabs0">
<p>exemple1</p>
</div>
</div>

<input type="button" onclick="ReloadTabs()" value="rebuild"/>



<script>
$(function() {
$("#tabs").tabs();
});

//add tabs and recreate my tabs

function ReloadTabs() {

var liElement1 = document.createElement('li');
var anchElement1 = document.createElement('a');
$(anchElement1).attr("href", "tab1");
$(liElement1).append(anchElement1);

var liElement2 = document.createElement('li');
var anchElement2 = document.createElement('a');
$(anchElement2).attr("href", "tab2");
$(liElement2).append(anchElement2);


$("#tabs ul").append(liElement1);
$("#tabs ul").append(liElement2);

$("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
$("#tabs").tabs("refresh");
}


</script>
</body>
</html>

最佳答案

你可以这样尝试

更改按钮的 html

<input  type="button" id="rebuild" value="rebuild"/>

修改你的js代码

$(function() {
$("#tabs").tabs();

$(document).on('click', '#rebuild', function() {

var ul = $('#tabs').find('ul');
var liElement1 = $('<li />');
$(liElement1).append('<a href="#tab1" >tab1</a>');

var liElement2 = $('<li />');
$(liElement2).append('<a href="#tab2" >tab2</a>');

$(ul).append(liElement1);
$(ul).append(liElement2);

$("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
$("#tabs").tabs("refresh");
});

});

同时检查 jsfiddle

http://jsfiddle.net/0jp0xpmu/1/

我不确定,但我认为这对你有帮助。

关于javascript - 如何通过 JQuery ui Tabs 来动态创建元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30299174/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com