一款jQuery动态增删选项卡可自定义内容的插件,可以点击叉号删除已经添加的选项卡内容,也可点击右下角的加号,完成弹窗内容的填写并确认即可添加新的选项卡内容。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791