打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jQuery动态添加删除编辑标签代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery动态添加删除编辑标签代码 - </title>

 

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

 

</head>

<body>

 

<div class="wrap">

                   <!--选项卡标题内容 -->

                   <divclass="wrap-top">

                                     <divclass="tab-left"><<</div>

                                     <divclass="tab-right">>></div>

                                     <divclass="cont-tab">

 

                                                        <divclass="cont-scroll">

                                                                           <li>

                                                                                    <span>HTML</span>

                                                                                    <ahref="javascript:void

(0)">X</a>

                                                                                    <divclass="line"></div>

                                                                           </li>

                                                                           <li>

                                                                                    <span>CSS</span>

                                                                                    <ahref="javascript:void

(0)">X</a>

                                                                                    <divclass="line"></div>

                                                                           </li>

                                                                           <li>

                                                                                    <span>jQuery</span>

                                                                                    <ahref="javascript:void

(0)">X</a>

                                                                                    <divclass="line"></div>

                                                                           </li>

                                                                          <li>

                                                                                    <span>javascript</span>

                                                                                    <ahref="javascript:void

(0)">X</a>

                                                                           </li>

                                                        </div>

                                     </div>

                   </div>

 

 

 

                   <!--选项卡对应内容 -->

                   <divclass="wrap-content">  HTML</div>

                   <divclass="wrap-content">  CSS</div>

                   <divclass="wrap-content">  jQuery</div>

                   <divclass="wrap-content"> javascript</div>

 

 

                   <divclass="Add">

                                     <span></span>

                                     <divclass="memu">

                                              <li class="add-cont">添加内容</li>

                                               <liclass="del-cont">删除全部</li>

                                     </div>

                   </div>

 

 

                   <!--全屏添加内容遮罩 -->

                   <divclass="full">

                                     <divclass="full-wrap">

                                                        <divclass="full-top"><img src="img/add.png">添加

内容<span>X</span></div>

                                                        <!--添加选项卡内容 -->

                                                        <divclass="full-content">

                                                                           <divclass="full-inp">

                                                                                             <span>添加标题:

</span>

                                                                                             <inputtype=""

name="" placeholder="选项卡标题">

                                                                           </div>

                                                                           <divclass="full-inp">

                                                                                             <span>添加内容:

</span>

                                                                                             <textarea

placeholder="选项相应内容"></textarea>

                                                                           </div>

                                                                           <divclass="full-inp">

                                                                                             <botton>确认

</botton>

                                                                           </div>

                                                        </div>

                                     </div>

                   </div>

 

 

 

 

 

 

                   <!--全屏修改内容遮罩 -->

                   <divclass="full-modify">

                                     <divclass="full-wrap">

                                                        <divclass="full-top"><img src="img/modify.png">

改内容<span>X</span></div>

 

 

 

                                                        <!--添加选项卡内容 -->

                                                        <divclass="full-content">

                                                                           <divclass="full-modi">

                                                                                             <span>修改标题:

</span>

                                                                                             <inputtype=""

name=""placeholder="">

                                                                           </div>

                                                                           <divclass="full-modi">

                                                                                             <span>修改内容:

</span>

                                                                                             <textarea

placeholder=""></textarea>

                                                                           </div>

                                                                           <divclass="full-modi">

                                                                                             <botton>确认

</botton>

                                                                           </div>

                                                        </div>

                                     </div>

                   </div>

 

 

 

 

 

</div>

 

<scriptsrc="js/jquery.min.js"></script>

<!--使用低版本jQuery可以不调用jquery-migrate-1.2.1.min.js-->

<scriptsrc="js/jquery-migrate-1.2.1.min.js"></script>

<scriptsrc="js/tab.js"></script>

<scripttype="text/javascript">

         $(".wrap").tabs()

</script>

 

<div style="text-align:center;margin:50px0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器:360FireFoxChromeSafariOpera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

</p>

<p>来源:<a href="http://www.shaxiangift.com/"target="_blank"> </a></p>

</div>

</body>

</html>

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery个人名片样式代码
基于jQuery图像碎片切换效果插件FragmentFly
Jquery EasyUi实战教程布局篇
JSP中如何使用JQuery?
标签云(tagcloud)的球形JQuery插件
JQUERY 选择器大全
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服