选项卡

LayUI笔记

阅读更多关于 LayUI笔记

LayUI 经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案. 其他UI框架： Bootstrap，Element， EasyUI，LayUI 等等 LayUI使用 Layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 1. 官网首页下载 https://www.layui.com/ 2. 引入layui核心文件： layui/css/layui.css // layui中内置的样式 layui/layui.js // layui中核心的js插件(模块化使用) layui/layui.all.js // layui中所有的js 3. layui的目录介绍: layui ├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ ├─layui.css //核心样式文件 │ └─layui.mobile.css //移动端CCSS样式 ├─font //字体图标目录（内置字体） ├─images //图片资源目录

用构造函数的方法写选项卡

阅读更多关于用构造函数的方法写选项卡

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="tab"> <div class="btns"> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div> <div class="boxs"> <div id=""> 1 </div> <div id="" style="display: none;"> 2 </div> <div id="" style="display: none;"> 3 </div> </div> </div> <div id="tab2"> <div class="btns"> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div> <div class="boxs"> <div id=""> 1 </div> <div id="" style="display: none;"> 2 </div> <div id="

用es6的方法写选项卡（和构造函数的方法很类似）

阅读更多关于用es6的方法写选项卡（和构造函数的方法很类似）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="tab"> <div id="btns"> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> </div> <div id="boxs"> <div id=""> 1 </div> <div id="" style="display: none;"> 2 </div> <div id="" style="display: none;"> 3 </div> </div> </div> <script type="text/javascript"> //字面量 // 构造函数 // 类 //架构师主程 let tab = { btns:document.querySelectorAll('#btns button'), boxs:document.querySelectorAll('#boxs div'), selectedIndex:1, init(){ //init 初始化 this.selectedBtnOfIndex(this

阅读更多关于选项卡

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <style> 10 .box{ 11 height:430px; 12 width:650px; 13 border:1px solid #000; 14 overflow:hidden; 15 } 16 li{ 17 list-style: none; 18 } 19 img{ 20 margin: 0; 21 width:650px; 22 height: 400px; 23 } 24 ul,ol{ 25 margin: 0; 26 padding: 0; 27 } 28 .uls li{ 29 float: left; 30 height: 32px; 31 width: 33.3%; 32 cursor:pointer; 33 text-align: center; 34 } 35 .ols li{ 36

tab栏切换制作

阅读更多关于 tab栏切换制作

tab栏切换制作先上图要求1：默认状态，第一个选项卡被选中，展示第一个选项卡的内容策略：第一个选项卡默认有被选中的样式，第一个选项卡对应的display: block，其他的dispaly设为none 要求2: 选项卡模块：被点击的变为红底白字，其他的变为白底红字策略：排他思想，每次点击一个选项卡时，先把其他选项卡设为默认样式，然后自己设为被选中的样式。这里我们先在style里面设置一个新的class,把这个样式给被选中的选项卡。要求3：每点击某个选中卡，出现对应的模块内容，点击第一个li，展示第一个div,点击第几个li，展示第几个div......，如何知道选中了第几个li呢? 策略：利用for循环，给每个li设置一个自定义属性，每点击这个li，得到该liindex的属性的值代码部分： 1 <body> 2 <div class="con"> 3 <div class="tab_list"> 4 <ul> 5  6 <li class="tabChange">商品介绍</li> 7 <li>规格与包装</li> 8 <li>售后保障</li> 9 <li>商品评价</li> 10 </ul> 11 </div> 12 <div class="tab_containt"> 13 <div style="display: block"

任务计划实现定时开关机—休眠唤醒

阅读更多关于任务计划实现定时开关机—休眠唤醒

利用任务计划实现计算机定时 (休眠唤醒) 目录： 1. 通过cmd.exe”的 “powercfg -h on” 命令，开启“计算机休眠功能”。 2. 通过（控制面板/电源选项/更改计算机睡眠时间/更改高级电源设置/睡眠），开启“允许使用唤醒定时器”。 3. 通过（控制面板/电源选项/更改计算机睡眠时间/更改高级电源设置/平衡），关闭“唤醒时需要密码”。 4. 通过（控制面板/管理工具/任务计划程序/任务计划程序库），右侧“创建任务”。 5. 创建休眠任务（程序或脚本shutdown.exe；添加参数-h）。 6. 创建唤醒任务（程序或脚本notepad.exe；添加参数:无）（条件选项卡：一定要勾选上“唤醒计算机运行此任务”） 1.首先查看电脑的休眠功能是否开启，如果没有需要先开启计算机的休眠功能（注意是“休眠”而不是“睡眠”）。比较直接的方法是，点击系统“开始”，在搜索窗口中输入“cmd.exe”，在结果中看见了“cmd.exe”，右击选择“以管理员权限运行程序”打开“cmd.exe”命令窗口，输入命令“powercfg -h on”即可开启计算机休眠功能。注：如何关闭休眠功能？—开始菜单-所有程序-附件-右键命令提示符-使用管理员权限打开—输入“powercfg -h off”回车。 2 补充重点：必须取消选择“自动重新启动”——解决休眠重启问题步骤：首先右击开始菜单

how to backup and restore database of SQL Server

阅读更多关于 how to backup and restore database of SQL Server

Back up 1,右键选中需要备份的数据库，Tasks-->Backup 2.General中，Destination，先remove掉之前的，然后再Add 需要注意的是，add的文件，必须要以.bak为后缀名，否则后面restore的话，不会显示出备份的文件 Restore 1.在数据库服务器的Databases上右键，选择Restore Database 1.1 General选项卡 1.1.1选择Device进行浏览，找到之前备份的文件。在查看文件的时候，默认是查看.bak文件。不过也可以选择all files，那样可以看到所有的文件 1.1.2 General里面，Destination中的Database需要起一个不同的名字，这个名字是显示在ManagementStudio中的选择路径之后，点击刷新的图标，然后下方会自动筛选可以同时添加多个备份数据库，但是每一个数据库的restore plan是需要切换选项卡来进行独立设置的 1.2 Files选项卡在General中，每切换一个数据库，Files选项卡中都需要独立配置一下 Logical File中的Rows Data和Log，都需要进行重命名，确保不重名。Restored as 这个列的里面的数据需要重命名 1.3 Options选项卡取消勾选Tail-log backup Restore failed

用js和css实现选项卡效果

阅读更多关于用js和css实现选项卡效果

1效果图： 2代码： html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选项卡效果</title> <link rel="stylesheet" href="../css/tab-list.css"> </head> <body> <div class="main"> <ul id="option"> <li onclick="setTab(0)">第一张</li> <li onclick="setTab(1)">第二张</li> <li class="active" onclick="setTab(2)">第三张</li> <li onclick="setTab(3)">第四张</li> </ul> <ul id="content"> <li>第一张内容</li> <li>第二张内容</li> <li class="active">第三张内容</li> <li>第四张内容</li> </ul> </div> <script src="../js/tab

jQ选项卡案例

阅读更多关于 jQ选项卡案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; color: white; } #box{ width: 400px; height: 300px; } #box ul{ width: 100%; overflow: hidden; } #box ul li{ float: left; width: 50px; height: 50px; margin: 0 10px; background-color: red; text-align: center; line-height: 50px; } .active{ width: 70%; height: 100px; background-color: blue; display: none; } </style> </head> <body> <div id="box"> <ul> <li> <a href="javascript:void(0)">张三</a> </li> <li> <a href="javascript:void(0)">李四</a>

js之tab选项卡以及排思想

阅读更多关于 js之tab选项卡以及排思想

排它思想选中一个排除其他的 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .active{ 8 background-color: blue; 9 } 10 #aaa{ 11 width: 50px; 12 height: 70px; 13 background-color: red; 14 position: absolute; 15 top: 30px; 16 display: none; 17 18 } 19 20 #box{ 21 width: 50px; 22 height: 30px; 23 background-color: blue; 24 position: relative; 25 } 26 </style> 27 </head> 28 <body> 29 <button>按钮1</button> 30 <button>按钮2</button> 31 <button>按钮3</button> 32 <button>按钮4</button> 33 <button>按钮5</button> 34 35 <div id="box"> 36 哈哈哈<div id="aaa"></div> 37 </div> 38

订阅选项卡