jQuery动态添加删除编辑选项卡代码



242 967 323



特效描述:jQuery 动态添加删除 编辑选项卡,jQuery自定义选项卡、添加选项卡、删除选项卡、编辑选项卡内容等。动态选项卡代码。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/tab.js"></script>

3. HTML代码

<div class="wrap">
		<!-- 选项卡标题内容 -->
		<div class="wrap-top">
				<div class="tab-left"><<</div>
				<div class="tab-right">>></div>	
				<div class="cont-tab">
						<div class="cont-scroll">
								<li>
									<span>HTML</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>CSS</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>jQuery</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>javascript</span>
									<a href="javascript:void(0)">X</a>
								</li>
						</div>
				</div>
		</div>
		<!-- 选项卡对应内容 -->
		<div class="wrap-content">  HTML</div>
		<div class="wrap-content">  CSS</div>
		<div class="wrap-content">  jQuery</div>
		<div class="wrap-content"> javascript</div>
		<div class="Add">
				<span></span>
				<div class="memu">
					<li class="add-cont">添加内容</li>
					<li class="del-cont">删除全部</li>
				</div>
		</div>
		<!-- 全屏添加内容遮罩 -->
		<div class="full">
				<div class="full-wrap">
						<div class="full-top"><img src="img/add.png">添加内容<span>X</span></div>
						<!-- 添加选项卡内容 -->
						<div class="full-content">
								<div class="full-inp">
										<span>添加标题:</span>
										<input type="" name="" placeholder="选项卡标题">
								</div>
								<div class="full-inp">
										<span>添加内容:</span>
										<textarea placeholder="选项相应内容"></textarea> 
								</div>
								<div class="full-inp">
										<botton>确 认</botton>
								</div>
						</div>
				</div>
		</div>
		<!-- 全屏修改内容遮罩 -->
		<div class="full-modify">
				<div class="full-wrap">
						<div class="full-top"><img src="img/modify.png">修改内容<span>X</span></div>
						<!-- 添加选项卡内容 -->
						<div class="full-content">
								<div class="full-modi">
										<span>修改标题:</span>
										<input type="" name="" placeholder="">
								</div>
								<div class="full-modi">
										<span>修改内容:</span>
										<textarea placeholder=""></textarea> 
								</div>
								<div class="full-modi">
										<botton>确认</botton>
								</div>
						</div>
				</div>
		</div>
</div>
<!--使用低版本jQuery可以不调用jquery-migrate-1.2.1.min.js-->
<script type="text/javascript">
	$(".wrap").tabs()
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 选项卡自动切换 按钮控制 表单提交 添加删除 添加标签

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到