jquery插件ui中tabs实现选择面板效果

原创 2012年03月28日 16:49:18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡table</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
	$("#tabs").tabs({
		//disabled:[1],//定义不可用元素
		selected:2
		});
		$("#tabs").tabs("remove",2);
		$("#tabs").tabs("add","tab-3","four");
	})
</script>
</head>

<body>
<div id="tabs">
<ul>
<li><a href="#tab-1">选项卡1</a></li>
<li><a href="#tab-2">选项卡2</a></li>
<li><a href="#tab-3">选项卡3</a></li>
<li><a href="#tab-4">选项卡4</a></li>
</ul>
<div id="tab-1">新闻:唐僧杀了白骨精</div>
<div id="tab-2">娱乐新闻:张杰的</div>
<div id="tab-3">IT新闻:苹果争论</div>
<div id="tab-4">乐乐乐乐乐</div>
</div>
</body>
</html>


相关文章推荐

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

jquery插件面板效果

面板效果 $(document).ready(function (){ $("#tabs").tabs({ event:"clic...

jquery插件 tabs有实例

  • 2010年08月09日 11:39
  • 36KB
  • 下载

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月28日 21:20
  • 3022

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷...
  • jjfat
  • jjfat
  • 2011年11月01日 19:08
  • 893

jQuery插件 实现图片文字遮罩效果

  • 2010年07月02日 09:39
  • 386KB
  • 下载

jquery插件实现幻灯效果

  • 2015年04月14日 13:06
  • 814KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件ui中tabs实现选择面板效果
举报原因:
原因补充:

(最多只允许输入30个字)