03.
<head>
04.
<head>
05.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
06.
<title>Adding jQuery tabs dynamically by PlaKriM ฉึกๆ</title>
07.
<link type=
"text/css"
href=
"css/smoothness/jquery-ui-1.8.4.custom.css"
rel=
"stylesheet"
/>
08.
<script type=
"text/javascript"
src=
"js/jquery-1.4.2.min.js"
></script>
09.
<script type=
"text/javascript"
src=
"js/jquery-ui-1.8.4.custom.min.js"
></script>
10.
<script type=
"text/javascript"
>
11.
$(
function
(){
12.
var
mytabs = $(
"#tabs"
).tabs();
13.
$(
'#add'
).click(
function
(e){
14.
var
newid = $(
'#tabs li'
).length + 1;
15.
mytabs.append($(
'<div id="'
+ newid +
'"></div>'
).append(
'Data '
+ newid)).tabs(
'add'
,
'#'
+ newid,
'Tab'
+ newid).tabs(
'select'
,
'#'
+ newid);
16.
e.preventDefault();
17.
});
18.
});
19.
</script>
20.
</head>
21.
<body>
22.
<div id=
"tabs"
>
23.
<ul>
24.
<li><a href=
"#tabs-1"
>Tab 1</a></li>
25.
<li><a href=
"#tabs-2"
>Tab 2</a></li>
26.
<li><a href=
"#tabs-3"
>Tab 3</a></li>
27.
</ul>
28.
<div id=
"tabs-1"
>Data 1</div>
29.
<div id=
"tabs-2"
>Data 2</div>
30.
<div id=
"tabs-3"
>Data 3</div>
31.
</div>
32.
<a href=
"#"
id=
"add"
>Add
new
tab</a>
33.
</body>
34.
</html>