jQuery动态自定义添加删除选项卡

2025-05-18 21:57:39

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div class="wrap"> <di即枢潋雳v 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、查看效果。

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。