插件封装(boot风格)
来源:互联网 发布:蒋梦婕为什么不红 知乎 编辑:程序博客网 时间:2024/06/15 08:44
源码:
<!DOCTYPE HTML><html><head><title>读取并修改元素的属性</title><meta charset="utf-8" /><style>.tabs{ list-style:none; padding:0;}.tabs a{ text-decoration:none;color:#000;padding:6px 12px;display:inline-block; width:96px; text-align:center;}.tabs>li{ float:left; border-bottom:1px solid #000;}.tabs>.active{ border:1px solid #000; border-bottom:0;}.container{position: relative;}.container>div{width: 300px;height: 100px;padding:30px; background:#fff; border:1px solid #000; border-top:0;position: absolute;top: 34px;left: 0;}.container>.active{ z-index:10;}</style></head><body><h2>实现多标签页效果</h2> <div id="my-tabs"> <ul class="tabs"> <li class="active"><a data-toggle="tab" href="#content1">10元套餐</a></li> <li><a data-toggle="tab" href="#content2">30元套餐</a></li> <li><a data-toggle="tab" href="#content3">50元包月</a></li> </ul> <div class="container"> <div id="content1" class="active"> 10元套餐详情:<br /> 每月套餐内拨打100分钟,超出部分2毛/分钟 </div> <div id="content2"> 30元套餐详情:<br /> 每月套餐内拨打300分钟,超出部分1.5毛/分钟 </div> <div id="content3"> 50元包月详情:<br /> 每月无限量随心打 </div> </div> </div> <script src="js/jquery-1.11.3.js"></script> <script> $(".tabs:has([data-toggle=tab])") .on("click","[data-toggle=tab]",e=>{ var $tar=$(e.target); if(!$tar.parent().is(".active")){ $tar.parent().addClass("active") .siblings().removeClass("active"); var id=$tar.attr("href"); $(id).addClass("active") .siblings().removeClass("active"); } }) </script></body></html>
---------------------------------------------------------
封装:注意在页面留属性;css中加一些前缀class
html:
<!DOCTYPE HTML><html><head><title>读取并修改元素的属性</title><meta charset="utf-8" /><link rel="stylesheet" href="boot_ui/style.css"></head><body><h2>实现多标签页效果</h2> <div id="my-tabs"> <ul class="tabs"> <li class="active"><a data-toggle="tab" href="#content1">10元套餐</a></li> <li><a data-toggle="tab" href="#content2">30元套餐</a></li> <li><a data-toggle="tab" href="#content3">50元包月</a></li> </ul> <div class="container"> <div id="content1" class="active"> 10元套餐详情:<br /> 每月套餐内拨打100分钟,超出部分2毛/分钟 </div> <div id="content2"> 30元套餐详情:<br /> 每月套餐内拨打300分钟,超出部分1.5毛/分钟 </div> <div id="content3"> 50元包月详情:<br /> 每月无限量随心打 </div> </div> </div> <script src="boot_ui/jquery-3.2.1.js"></script> <script src="boot_ui/style.js"></script></body></html>
css
.tabs{ list-style:none; padding:0;}.tabs a{ text-decoration:none;color:#000;padding:6px 12px;display:inline-block; width:96px; text-align:center;}.tabs>li{ float:left; border-bottom:1px solid #000;}.tabs>.active{ border:1px solid #000; border-bottom:0;}.tabs+.container{position: relative;}.tabs+.container>div{width: 300px;height: 100px;padding:30px; background:#fff; border:1px solid #000; border-top:0;position: absolute;top: 34px;left: 0;}.tabs+.container>.active{ z-index:10;}
js
/* boot风格插件封装 */if(typeof jQuery !== "function"){ throw new Error("diy_ui依赖于jQuery,必须先引入jquery.js");}else{$(()=>{ //DOM加载后自动执行$(".tabs:has([data-toggle=tab])") .on("click","[data-toggle=tab]",e=>{ e.preventDefault(); var $tar=$(e.target); if(!$tar.parent().is(".active")){ $tar.parent().addClass("active") .siblings().removeClass("active"); var id=$tar.attr("href"); $(id).addClass("active") .siblings().removeClass("active"); } })})}
阅读全文
0 0
- 插件封装(boot风格)
- 插件封装2(boot风格)
- JQ插件封装(jq_ui风格)
- spring boot restful API风格
- spring boot maven 插件
- struts2-rest风格插件说明
- Chrome 插件JSONView改变风格
- spring boot(3)-Rest风格接口
- spring boot(3)-Rest风格接口
- jquery封装对话框插件
- 电解电容封装尺寸(插件)
- jquery 插件封装
- jQuery 插件开发 封装
- jquery封装jqgrid插件
- jquery插件封装
- jquery 插件封装总结
- [Javascript] 插件封装
- 插件式皮肤封装
- 引入极线约束的surf特征匹配
- codeforces Unusual Sequences (数论)
- java.io.File中mkdir()和mkdirs()的区别
- 《20171210》
- 神经网络基本原理-4.5神经网络之网络正则化方法:L2、L1、DropOut
- 插件封装(boot风格)
- 敦敦敦的数据结构题!(
- 前后端分离之Springboot后端
- 《数字技术》连载11: 第2章 数字器件 第6节 ECL 门电路
- 欧几里德算法
- iscroll.js listloading.js是一个移动端的上拉、下拉加载更多的组件
- BackgroundWorker使用总结
- 牛人的博客
- hibernate的配置文件详解