tabs

最新推荐文章于 2025-08-12 14:37:12 发布

原创最新推荐文章于 2025-08-12 14:37:12 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

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

7 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单选项卡插件，通过HTML结构定义不同的标签页，并利用CSS进行样式设置。用户可以通过点击不同的标签切换内容，同时提供了关闭标签的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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