您的位置：首页 > Web前端 > JQuery

Jquery插件--实现面板模拟效果

2012-03-28 17:29 567 查看

<!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>无标题文档</title>
<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 type="text/javascript">
//当窗体加载完毕的时候 触发该匿名函数

//$(document) //把dom对象转换成jquery对象

//.ready(function (){});

$(function(){
$("#tabs").tabs({//根据id选择器获取当前

event:"mouseover",//event面板激活的事件效果处理 默认的是click
//disabled:[1],//面板不可用，1代表的是第二个面板不可用 [1,2]
fx:{
opacity:'toggle',//透明度从无到有的一个动画的效果

},
selected:1,
});

$("#tabs").tabs("remove",2);
$("#tabs").tabs("add","tab4.html","four");

});
</script>

</head>

<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>
<li><a href="tab4.html">面板4</a></li>

</ul>
<div id="tab-1">
1111111111111111111
</div>
<div id="tab-2">
2222222222222222
</div>
<div id="tab-3">
33333333333333333333333
</div>
</div>
</body>
</html>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航