jquery ui 插件实例（2）

最新推荐文章于 2024-09-21 10:52:49 发布

lvzk555

最新推荐文章于 2024-09-21 10:52:49 发布

阅读量681

点赞数

文章标签： jquery ui javascript stylesheet tabs function

本文链接：https://blog.csdn.net/lvzk555/article/details/7403828

版权

2、模拟tabs效果

js效果

 <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js">
</script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript">
//当窗体加载完毕时候 触发该匿名函数
//$(document) //dom对象转化为jquery对象
//.ready(function(){})
$(function(){
	$("#tabs").tabs({             //根据id选择器获取当前id选择器的jquery对象
		event:"click",        //
		//disabled:[1],             //面板不可用 1 代表的第二面板不可用
		fx:{
			opacity:'toggle'		//透明度从无到有的动画效果
			},
		
		selected:1               //默认选择 1
		
	});
	})
	
	
</script>

html格式

<body>
<h1>模拟tabs效果</h1>
<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></ul>
<div id="tab-1">
新闻：gvgi1

</div>
<div id="tab-2">
新闻：gvgi2

</div>
<div id="tab-3">
新闻：gvgi3

</div>
</div>
</body>

实际效果图例：