tabs

最新推荐文章于 2024-07-11 20:55:36 发布

ruanzy888888

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量117

点赞数

分类专栏：我的RIA框架文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/ruanzy888888/article/details/84449602

版权

我的RIA框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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" lang="en" xml:lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>

 <style>
            body{
				margin:10px;
				padding:10px;
			}
			.tabs{
				
				height:500px;
				border: 1px solid #d2d2d2;
			}
			
			.icon{
				background-image:url(ui-icons_222222_256x240.png);
				float:right;
				width:16px;
				height:16px;
				margin:7px 0;
				cursor:pointer;
			}
			
			.tabs ul{
				margin:0;
				padding:2px 0 0 0;
				border-bottom: 1px solid #d2d2d2;
				background:#efefef;
				height:30px;
			}
			
			.tabs li{
				margin:0 2px;
				padding: 0 5px;
				list-style: none;
				border-top: 1px solid #d2d2d2;
				border-right: 1px solid #d2d2d2;
				border-left: 1px solid #d2d2d2;
				float:left;
				text-align:center;
				height:30px;
				line-height:30px;
				display:block;
				font-size:14px;
			}
			
			.clear{
				clear:both;
			}
			
			li.active{
				background:#fff;
				margin-bottom:-1px;
				height:30px
			}
			
			.icon-close{
				background-position:-96px -128px;
			}
			
			.cnt{
				display:none;
				margin:2px;
			}

            
</style>
<script type="text/javascript">
            $(function(){
                $('li').click(function(){
					$('li.active').removeClass('active');
					$(this).addClass('active');
					$('#' + $(this).attr('t')).show().siblings('div').hide();
				});
				$('li span.icon-close').click(function(){
					var p = $(this).parent();
					p.remove();
					$('#' + p.attr('t')).remove();
				});
            });
</script>
    </head>
    <body>
        
		<div id='kkk' class='tabs'>
		<ul>
		<li t='tab0'>用户管理<span class='icon icon-close'></span></li>
		<li t='tab1'>产品管理<span class='icon icon-close'></span></li>
		<li t='tab2'>系统管理<span class='icon icon-close'></span></li>
		<li t='tab3'>业务管理<span class='icon icon-close'></span></li>
		<li t='tab4'>播放dfsdfsdf管理<span class='icon icon-close'></span></li>
		</ul>
		<div id='tab0' class=cnt>aaaa</div>
		<div id='tab1' class=cnt>bbbb</div>
		<div id='tab2' class=cnt>cccc</div>
		<div id='tab3' class=cnt>dddd</div>
		<div id='tab4' class=cnt>eeee</div>
		</div>
    </body>
</html>

ruanzy888888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tabs

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en&
复制链接

扫一扫