css div js 怎样实现多个tab标签 生成 切换

JavaScript017

css div js 怎样实现多个tab标签 生成 切换,第1张

tab标签生成:

首先用css定义一个框架;

然后用div调用出来css定义的这个框架;

js是用来实现tab切换效果的。

可以百度搜索一下tab素材或者选项卡素材。

有很多相关素材的,

js和css可以写在当前页面,也可以分开调用;

一般分开来会比较好管理一些。

例:

<html>

<head>

<style>.tab{width:300px0height:100px}</style>

</head>

<body>

<div class="tab">内容</div>

<script>function{}</script>

</body>

</html>

要先初始化tabs后才能调用add方法,使用样式来初始化easyUI需要在dom

ready前将html代码添加到dom中,要不也无法初始化

var

tab

=

$("<div

id='tab_row_"

+

r

+

"_column_"

+

c

+

"'

class='easyui-tabs'

style='width:500pxheight:250px'>")

$('#xxxx').append(tab)

tab.tab()//要手动调用tabs进行初始化

var

content

=

"<table

id='table_datagrid_'"

+

view.id

+"></table>"

tab.tabs('add',

{

title:

view.title,

content

:

content,

closable:

true

})