jquery面板效果

最新推荐文章于 2024-03-15 00:15:00 发布

byn10

最新推荐文章于 2024-03-15 00:15:00 发布

阅读量1.9k

点赞数

文章标签： jquery xhtml stylesheet javascript tabs function

本文链接：https://blog.csdn.net/byn10/article/details/7404370

版权

tabs.html

<!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>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../include/jquery-ui-1.8.18.custom.min.js"></script>

<link rel="stylesheet" href="../include/jquery-ui.css" />
<script type="text/javascript">

       //$(document)  把dom对象转换成jQuery对象
	   //.ready(function(){});
	   
	   //当窗体加载完毕的时候 触发该匿名函数
	   $(function(){
		   $("#tabs").tabs({      //根据id选择器获取当前的id选择器的jQuery对象
			   
			   event:"mouseover",  //面板展开的事件效果，默认是click效果
			   //disabled:[1],      //面板不可用 1代表第二个面板不可用 [1,2]
			   fx:{opacity:'toggle'},  //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="./tab.html">面板4</a></li>
       </ul>
       
       <div id="tab-1">
           新闻：1齐天大圣 大闹天空！
       </div>
       
       <div id="tab-2">
           新闻：2齐天大圣 大闹天空！
       </div>
       
       <div id="tab-3">       
           新闻：3齐天大圣 大闹天空！
       </div>
   </div>
</body>
</html>

tab.html

<!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>
</head>

<body>
   <p>阿本工程的风格</p>
</body>
</html>

byn10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery面板效果

tabs.html无标题文档 //$(document) 把dom对象转换成jQuery对象 //.ready(function(){}); //当窗体加载完毕的时候触发该匿名函数 $(function(){ $("#tabs").tabs({ //根据id选择器获取当前的id选择器的jQuery对象
复制链接

扫一扫