jQuery+html+css实现选项卡功能 直接上代码<div class="page-header float-right"> <div class="page-title"> <ol class="breadcrumb text-right"> <li onclick="changeTab(this,'chicang')" class="hide"><a href="#">持仓信息</a></li> <li onclick="changeTab(this,'xianjia')" class="active"><a href="#">限价委托</a></li> <li onclick="changeTab(this,'jihua')" class="hide"><a href="#">计划委托</a></li> </ol> </div> </div>/** *选项卡切换 */ function changeTab(a,type){ //获取选项卡状态,获取选中选项卡状态,更改选项卡状态,切换选项卡对应div的显示隐藏 var myli = jQuery(a).parent().children();//获取同级的所有元素 var sort = jQuery(a).index();//获取选中元素排第几个 //除了选中的其他都变隐藏,先全部变隐藏然后为选中的div更改样式 jQuery(".card").css('display','none'); switch (type) { case 'chicang': jQuery(".chicang").css('display','flex'); break; case 'xianjia': jQuery(".xianjia").css('display','flex'); break; case 'jihua': jQuery(".jihua").css('display','flex'); break; default: break; } console.log(myli); for (let index = 0; index <= myli.length; index++) { if(index != sort){//不是被选中的清除active添加hide // console.log(index+'-z-'+sort); jQuery(myli[index]).removeClass("active"); jQuery(myli[index]).addClass("hide"); //显示对应的div }else{//是被选中的添加active清除hide // console.log(index+'-x-'+sort); jQuery(myli[index]).removeClass("hide"); jQuery(myli[index]).addClass("active"); //显示对应点div } } // console.log(jQuery(a).index()); }

在复制codepen代码时踩得坑,three.js实现的特效 本文因刷屏广告太多已关闭评论 首先我们先放一下源代码地址 查看演示 这是效果 我们发现通过直接复制粘贴上方三个框里的代码并不能成功运行代码通常会报错这是因为没有引入three.js,导致无法进行后边的内容three.js下载地址 下载地址 本人推荐还是根据这个链接里的网盘下载比较靠谱,而且官网下载贼慢(我是用的百度云试用60秒下载的)下载完之后引入three.js发现还是报错Cannot read property 'ModelBufferGeometry' of undefined这是因为我们并没有完全引完JS代码重新打开我们的演示地址打开f12可以发现我们少引了两部分的js,将他们全部复制引入之后就可以了,不要忘了第二部分script上的id

php+layui写出图片上传 之前一直用框架加复制前辈的代码来完成图片上传,不清楚图片上传是怎么回事,这次写一个纯php+layui上传图片的例子文件上传链接首先前端代码<div class="layui-form-item"> <label class="layui-form-label">图片</label> <div class="layui-input-block"> <img id="pre_img" style="height: 30px;" /> <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img"> <i class="layui-icon">&#xe67c;</i>上传图片 </button> <input type="hidden" name="img" value=""> </div> </div> <script> layui.use(['upload','jquery'],function () { $ = layui.jquery; var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#upload_img' //绑定元素 ,url: '/upload.php' //上传接口 ,accept:'images' ,done: function(res){ //上传完毕回调 $('#pre_img').attr('src',res.msg); $('input[name="img"]').val(res.msg); } ,error: function(){ //请求异常回调 } }); }); </script>当然你可以引入layui在线的样式和js <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script>然后是php代码: <?php $file = $_FILES["file"]; if ($file==null) { exit(json_encode(array('code'=>1, 'msg'=>'未上传图片'))); } // 获取文件后缀 $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); // 判断文件是否合法 if(!in_array($extension, array("gif","jpeg","jpg","png"))){ exit(json_encode(array('code'=>1, 'msg'=>'上传图片不合法'))); } $info = move_uploaded_file($file['tmp_name'], "./uploads/".$file['name']); //移动文件到指定目录 建议文件名自己在修改一下 $img = '/uploads/'.$file['name']; exit(json_encode(array('code'=>0, 'msg'=>$img))); ?>

select选中事件,通过选中对应值控制另一个div显示隐藏 <select name="cailiao" id="cl" onchange="gradeChange()" class="form-control"> <option value="2">铝</option> <option value="1" >铁</option> </select> <div class="form-group" id = 'cy' style="display:none;"> <label for="exampleSelect1">冲压进度</label> <select name="chongya" class="form-control"> <option value="0" selected>未完成</option> <option value="1" >已完成</option> </select> </div> js部分function gradeChange(){ var objS = document.getElementById("cl"); var grade = objS.options[objS.selectedIndex].value; // console.log(grade); if(grade==1){ document.getElementById("cy").style.display="block"; }else{ document.getElementById("cy").style.display="none"; } }

网站禁止复制 <script> document.onkeydown = function(e){ var e=e||event; if (e.ctrlKey==1 && e.keyCode==67){ return false; } }//防止ctrl+C document.body.oncopy = function (){return false;} //阻止复制 </script> <script> document.body.onselectstart=document.body.oncontextmenu=function(){return false;};</script>