jQuery动态自定义添加删除选项卡
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<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>
4、书写css代码。
.full, .full-modify { display: none; position: relative; position: fixed; width: 100%; top: 0; left: 0; height: 100%; background: rgba(0,0,0,0.1) }
.full-wrap { height: 415px; width: 530px; border: 1px solid #ccc; background: #fff; text-align: center; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; border-radius: 15px; text-align: left; }
.full-top { width: 100%; height: 45px; background: #3C6FF0; text-align: left; font-weight: bold; color: #fff; border-radius: 10px 10px 0 0; line-height: 45px; }
.full-top img { vertical-align: middle; width: 20px; margin-left: 15px; margin-right: 5px }
.full-top span { float: right; margin-right: 15px; font-weight: bold; cursor: pointer }
.full-content { width: 100%; height: 240px; }
.full-inp, .full-modi { margin: 20px 15px; width: 90%; height: auto; color: #000; line-height: 40px; }
.full-inp span, .full-modi span { font-size: 14px }
.full-inp input, .full-modi input { margin: 0 10px; height: 28px; width: 70%; }
.full-inp textarea, .full-modi textarea { height: 210px; margin: 0 10px; word-wrap: break-word; font-size: 14px; width: 70%; }
.full-inp botton, .full-modi botton { background: #3DA5FB; border-radius: 2px; box-shadow: 0 0 2px #3DA5FB; padding: 12px 23px; color: #fff; font-size: 13px; cursor: pointer; clear: both; }
5、书写并添加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>
<script>
$(".wrap").tabs()
</script>
6、代码整体结构。
7、查看效果。
