jQuery动态增删选项卡可自定义内容

来源:https://www.sucaihuo.com/js/3014.html 2017-09-15 22:19浏览(2134) 收藏

一款jQuery动态增删选项卡可自定义内容的插件,可以点击叉号删除已经添加的选项卡内容,也可点击右下角的加号,完成弹窗内容的填写并确认即可添加新的选项卡内容。
jQuery动态增删选项卡可自定义内容
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

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

页面的body部分,需设置好多个选项卡的对应内容,代码如下:

<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库和必要的插件,代码如下:

<script type="text/javascript" src="js/jq-1.8.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript">
	$(".wrap").tabs()
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2