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>
实际效果图例: