<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery動態(tài)添加刪除編輯標(biāo)簽代碼 - </title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head> <body>
<div class="wrap"> <!-- 選項卡標(biāo)題內(nèi)容 --> <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>
<!-- 選項卡對應(yīng)內(nèi)容 --> <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">添加內(nèi)容</li> <li class="del-cont">刪除全部</li> </div> </div>
<!-- 全屏添加內(nèi)容遮罩 --> <div class="full"> <div class="full-wrap"> <div class="full-top"><img src="img/add.png">添加 內(nèi)容<span>X</span></div> <!-- 添加選項卡內(nèi)容 --> <div class="full-content"> <div class="full-inp"> <span>添加標(biāo)題: </span> <input type="" name="" placeholder="選項卡標(biāo)題"> </div> <div class="full-inp"> <span>添加內(nèi)容: </span> <textarea placeholder="選項相應(yīng)內(nèi)容"></textarea> </div> <div class="full-inp"> <botton>確 認(rèn) </botton> </div> </div> </div> </div>
<!-- 全屏修改內(nèi)容遮罩 --> <div class="full-modify"> <div class="full-wrap"> <div class="full-top"><img src="img/modify.png">修 改內(nèi)容<span>X</span></div>
<!-- 添加選項卡內(nèi)容 --> <div class="full-content"> <div class="full-modi"> <span>修改標(biāo)題: </span> <input type="" name="" placeholder=""> </div> <div class="full-modi"> <span>修改內(nèi)容: </span> <textarea placeholder=""></textarea> </div> <div class="full-modi"> <botton>確認(rèn) </botton> </div> </div> </div> </div>
</div>
<script src="js/jquery.min.js"></script> <!--使用低版本jQuery可以不調(diào)用jquery-migrate-1.2.1.min.js--> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/tab.js"></script> <script type="text/javascript"> $(".wrap").tabs() </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>適用瀏覽器:360,、FireFox、Chrome,、Safari,、Opera、傲游,、搜狗,、世界之窗. 不支持IE8及以下瀏覽器。 </p> <p>來源:<a href="http://www./" target="_blank"> </a></p> </div> </body> </html> |
|
來自: 昵稱48806104 > 《文件夾1》