JS控制 li 标签的class值添加与删除

<div id="processor"> <ol class="processorBox oh"> <li class="current"> <div class="step_inner fl"> <span class="icon_step">1</span> <h4> 填写注册信息</h4> </div> </li> <li> <div class="step_inner"> <span class="icon_step">2</span> <h4> 公司信息</h4> </div> </li> <li> <div class="step_inner fr"> <span class="icon_step">3</span> <h4> 个人资料</h4> </div> </li> </ol> <div class="step_line"> </div> </div> <a id="nextBtn" class="btn btn_primary" href="javascript:;" >下一步</a> $('#nextBtn').click(function () { var i = $('.processorBox li').index(); $('.processorBox li').removeClass('current').eq(i).addClass('current'); $('.step').fadeOut(300).eq(i).fadeIn(500); } }); 点击下一步按钮时，触发onclick事件，将第一个li标签的class值删除，并在下一个li标签上添加class值，，以上是我自己写的，但是点击后没有反映，而且 var i 获取的值为0 ，，，求大神解决

javaScript li标签如何设置选中

``` 我写的是jsp页面，设置li标签是选中状态的，li标签是动态添加的下面是代码： {{each basInforList as t}} <li data-baseinforid="{{t.identifyId}}" name="zwTableName" {{if t.identifyId == baseinforid}} class="active" {{/if}} style="text-align:center;padding:4px;text-valign:middle;line-height:100%;border-bottom:1px solid #CCCCCC;font-size:20px;"> {{t.zwTableName}} {{if t.adoptType!="1"}} <span class="floorkingred">&nbsp;采 信&nbsp;</span> {{/if}} </li> {{/each}} 我想让其中的一个li标签设置为选中状态，{{if t.identifyId == baseinforid}} class="active" {{/if}}这个是我写的判断条件，百度了一下说class='active'可以，但我的不行。求大神解决 ```

求助js实现导航菜单点击切换

ul class="nav navbar-nav" id=“ulid” li class="active"> a href="。。。。。">导航1/a/li li a href="。。。。。">导航2/a /li li a href="。。。。。">导航3/a /li li a href="。。。。。">导航4/a /li /ul ``` ``` jS如何实现根据当前页面url 给当前a标签所在的li 添加一个class 属性，请清理同级别其他的li的class属性！

JS动态添加HTML标签

在JS里有个数组我想遍历显示在页面的<UI>标签里，并且<li><label>最后包含的是<a>标签及值，弄了好长时间也没弄明白 希望知道的大哥帮下忙！小弟不是很懂JS <ul class="two" id="driveLetter"></ul> var driveLetter = document.getElementById("driveLetter"); for(var i=0; i<a.length; i++) { driveLetter.innerHTML="<li><label><a href=javascript:;>"+a[i]+"</a></label></li>"; }

js循环添加onmouseover事件，只有第一个标签正常显示

for(var o = 0; o < rebookUnit.length; o++){ rebookUnit[o].onmouseover = (function(){ for(var j = 0; j < rebookUnit.length; j++){ if(o == j){ console.log(rebookUnit[j]); rebookUnit[j].classList.add("reBook-inner-hover"); } } })(o); } ``` ```<li class="reBook-unit 2"> <span class="reBook-unit-img" tabindex="0"> <img src="images/books/1b6cc0086c5e115db418d79d9915b4b0_0_1_300_300.jpg" width="100%"> <div class="reBook-introduce"> <a href="#" target="_blank"> <p class="reBook-inner">著名的当代思想家、耶鲁大学教授詹姆斯·斯科特曾告诉我们国家的视角为什么是错的。现在，在这本简短易懂、极其个人化的新作中，他论证了无政府主义者的视角为什么重要。他用引人入胜、斗志昂扬，甚至幽默的方式，捍卫重视地方性知识、常识、个体创造力、自发性的无政府主义思维，令我们能够审视世间百态……小到学校、工厂、养老院、游乐场里的日常社会政治互动，大到民众抗议和革命。</p> </a> </div> </span> </li> <li class="reBook-unit"> <span class="reBook-unit-img" tabindex="0"> <img src="images/books/1b6cc0086c5e115db418d79d9915b4b0_0_1_300_300.jpg" width="100%"> <div class="reBook-introduce"> <a href="#" target="_blank"> <p class="reBook-inner">著名的当代思想家、耶鲁大学教授詹姆斯·斯科特曾告诉我们国家的视角为什么是错的。现在，在这本简短易懂、极其个人化的新作中，他论证了无政府主义者的视角为什么重要。他用引人入胜、斗志昂扬，甚至幽默的方式，捍卫重视地方性知识、常识、个体创造力、自发性的无政府主义思维，令我们能够审视世间百态……小到学校、工厂、养老院、游乐场里的日常社会政治互动，大到民众抗议和革命。</p> </a> </div> </span> </li> ``` ```

JS制作二级菜单的问题，我使用的innerHTML

先说下问题： 我想用JS的innerHTML添加二级菜单，所以在一级菜单后面加了一个空的div标签 ，然后innerHTML加入内容，并在<li>标记中加入onmouseover和onmouseout 事件。两段代码如下。 现在的问题是 鼠标点了“我的京东”后二级菜单出现，但是，离开二级菜单一直在那挂着，不消失，不知道是因为什么？ 求懂得朋友解答！！ 另您给解答后，再给说下您感觉比较好的添加二级菜单的方法，10C币奉上，不甚感谢。 ``` <li class="li_c li_me" onmouseover="myMouse();" onmouseout="myMouseOut();"><a href="#">我的京东</a><div id="myid" ></div></li> ``` js代码： ``` <script type="text/javascript"> function $(id){return document.getElementById(id);} //这个里面的id没带“”引号 function myMouse() { $("myid").innerHTML="<table><tr><td><a href=\"#\">我的京豆</a></td><td><a href=\"#\">我的白条</a></td></tr><tr><td><a href=\"#\">返修进度</a></td><td><a href=\"#\">我的会员</a></td></tr></table>"; $("myid").style.position="absolute"; //html中的属性=后面是属性值，属性值要加双引号"" $("myid").style.width="120px"; $("myid").style.height="60px"; $("myid").style.display="block"; } function myMouseOut(){ $("myid").style.display="none"; } </script> ```

js如果实现当前页面中已筛选参数高亮

当前网址,例:http://www.shadoweb.cn/anli/?type=list&tag=asp&webok=2014 页面中筛选项列表: ``` <div class="sl_list" id="sl_list"> <div class="selector"> <span>开发语言:</span> <ul class="valueList"> <li><a href="/anli/?type=list&webok=2014">全部</a></li><li><a href="/anli/?type=list&webok=2014&tag=asp">ASP</a></li><li><a href="/anli/?type=list&webok=2014&tag=php">PHP</a></li><li><a href="/anli/?type=list&webok=2014&tag=jsp">JSP</a></li> </ul> </div> <div class="selector"> <span>项目日期:</span> <ul class="valueList"> <li><a href="/anli/?type=list&tag=asp">全部</a></li><li><a href="/anli/?type=list&tag=asp&webok=2016">2016</a></li><li><a href="/anli/?type=list&tag=asp&webok=2015">2015</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014">2014</a></li> </ul> </div> <div class="selector"> <span>网站类型:</span> <ul class="valueList"> <li><a href="/anli/?type=list&tag=asp&webok=2014">全部</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=公司">公司</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=论坛">论坛</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=官网">官网</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=企业">企业</a></li> </ul> </div> </div> ``` 如何通过js实现列表中的a标签高亮. 即当前链接中 ?type=list&tag=asp&webok=2014 a标签中链接参数相同的高亮(只含&tag=asp&webok=2014这两个参数 同时,还需要注意webname参数值的中文转码... 请大神小手抖一抖,不胜感激. 我在网上找了一个,只是针对一个链接的,修改后实现不了. ``` <script type="text/javascript"> var myNav = document.getElementById("sl_list").getElementsByTagName("a"); for(var i=0;i<myNav.length;i++) { var links = myNav[i].getAttribute("href"); var myURL = "\/anli\/" + window.location.search; if(myURL.indexOf(links) != -1) { myNav[i].className="sl_on"; } } document.write(myURL); </script> ``` 我的思路是得到当前URL中的参数,再匹配列表中的a标签中的URL的参数,参数和值完全相等的情况下,添加class. 不会写JS,麻烦了.

我想请教一下关于easyui中easyui.css文件中的类easyui-tabs的高度无法调整

easyui我是参照菜鸟教程中《jQuery EasyUI 布局 - 动态添加标签页（Tabs》 网址：https://www.runoob.com/jeasyui/jeasyui-layout-tabs2.html 源代码： main_view.jsp <%-- Created by IntelliJ IDEA. User: Atlantide Date: 2020/1/27 Time: 15:51 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"> <link href="../css/main/main_view.css" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" href="../css/main/style.css"/> <link type="text/css" rel="stylesheet" href="../css/main/index.css"/> <script src="../js/jquery.min.js"></script> <!-- 动态菜单JS --> <script type="text/javascript" src="../js/menu.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script> <script> function addTab(title, url){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); } } </script> </head> <body> <div class="cont-top"> <img src="../images/main/华依logo.jpg" width="100px" height="80px"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; <img src="../images/main/用户头像.jpg" width="60px" height="50px"> </div> <div style="margin-bottom:10px"> <div class="left-menu" style="height:949px;"> <div class="menu-list"> <ul> <li class="menu-list-01" > <p class="fumenu">库房管理</p> <img class="xiala" src="../images/main/xiala.png" /> <div class="list-p"> <p class="zcd"><a href="#" class="a" onclick="addTab('库房分配','/erp/warehouse_distribution')"> <font color="white">库房分配</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('入库单','/erp/material_warehouse')"> <font color="white">入库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('出库单','/erp/product_warehouse')"> <font color="white">出库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('库存余额','/erp/product_warehouse')"> <font color="white">库存余额</font></a></p> </div> </li> <li class="menu-list-02" > <p class="fumenu">销售管理</p> <img class="xiala" src="../images/main/xiala.png" /> <div class="list-p"> <p class="zcd"><a href="#" class="a" onclick="addTab('库房分配','/erp/warehouse_distribution')"> <font color="white">库房分配</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('入库单','/erp/material_warehouse')"> <font color="white">入库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('出库单','/erp/product_warehouse')"> <font color="white">出库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('库存余额','/erp/product_warehouse')"> <font color="white">库存余额</font></a></p> </div> </li> </ul> </div> </div></div> <div class="right-menu"> <div id="tt" class="easyui-tabs" style="width:1200px;height:1000px"> <div title="首页"> </div> </div> </div> </body> </html> warehouse_distribution.jsp <%@ page import="java.util.List" %> <%@ page import="com.springboot.erp.entity.Warehouse" %> <%@ page import="java.util.ArrayList" %><%-- Created by IntelliJ IDEA. User: Atlantide Date: 2020/1/27 Time: 20:47 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>库房分配</title> <link type="text/css" rel="stylesheet" href="../css/main/main_view.css"/> </head> <body> <% List<Warehouse> warehouseList=new ArrayList<Warehouse>(); if(session.getAttribute("all_warehouses_session")!=null){ warehouseList=(List)session.getAttribute("all_warehouses_session"); session.removeAttribute("all_warehouses_session"); } %> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; <form action="" method="post"> 请输入仓库号： &emsp;&emsp;&emsp; <input type="text" name="warehouse_no"> &emsp;&emsp;&emsp; <input type="submit" value="查询"> </form> <table border="1" class="t1" width="70%"> <tr> <th>仓库编号</th> <th>仓库名称</th> <th>仓库地址</th> <th>仓库容量</th> <th>仓库租金</th> <th>操作</th> </tr> <% for(Warehouse wh:warehouseList){ %> <tr> <td align="center"><%=wh.getWarehouse_no()%></td> <td align="center"><%=wh.getName()%></td> <td align="center"><%=wh.getLocation()%></td> <td align="center"><%=wh.getVolume()%></td> <td align="center"><%=wh.getRent()%></td> </tr> <% } %> </table> </body> </html> 

复杂的兄弟新增，请大神帮帮忙，如下图，代码

##图一  ##图二  ##图三  ##问题 1.我点击图一的时候，展开，达到图二的状态，点击添加标签，多一个兄弟节点，这个新增的兄弟节点，要如何展开下一层 2.当我点击收到的时候，要如何达到把已经各层已经展开的兄弟节点。都清除，使得每一层都只一个输入框和添加标签这两个元素 ## 代码 ``` <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <meta name='viewport' content='width=device-width,initial-scale=1.0'/> <title></title> <!-- <link href='./font-awesome-4.7.0/css/font-awesome.css' rel='stylesheet' media='screen'/> --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> /*.safa-tree i{font-style:normal; color:#fff; background:#666; width:1em; display:inline-block; text-align:center; position:relative; } .safa-tree i:before{content:'+'; }*/ *{box-sizing:border-box; margin:0; padding:0; } .safa-tree{line-height:1em; font-size:16px; } .safa-tree span{display:block; padding:5px; } .safa-tree ul{margin:1em 0.5em; } .safa-tree i.fa{position:relative; margin-right:0.25em; cursor:pointer; } .safa-tree i.fa:hover{color:#666; } .safa-tree i.fa-square-o{display:none; } .safa-tree-node{display:inline-block; vertical-align:top; position:relative; box-sizing:border-box; } .safa-tree-node>ul{display:none; position:absolute; left:0; right:0; background-color:rgba(0,0,0,0.1); } .safa-tree-node.on{position:static; cursor:pointer; } .safa-tree-node.on>ul{display:block; } .safa-tree-node.on>span>i.fa-plus-square::before{content:"\F146"; } .safa-tree-node.on>span>i.fa-plus-square::after{content:"\F063"; position:absolute; top:100%; left:0; right:0; } .safa-tree-node.on>span:empty>i.fa-plus-square{display:none; } .safa-tree-node>span:empty i.fa-square-o{display:inline-block; } .safa-tree-node.on.line>ul{display:inline-block; margin:0; position:static; vertical-align:top; background:none; } .safa-tree-node.on.line>ul>.safa-tree-node:not(.on){display:none; } .safa-tree-node.on.line>ul>.safa-tree-node>span{color:#f00; } .safa-tree-node.on.line>span{display:inline-block; } .safa-tree-node.on.line>span>i.fa-plus-square::after{display:none; } .safa-tree-end>span>i::after{display:none; } .safa-tree-end>span>i::before{content:"\F111" !important; } .safa-tree-add{} .safa-tree-add>span{cursor:pointer; } .safa-tree-add>span:hover{color:#666; } </style> </head> <body> <h3>选择标签关系</h3> <div class='safa-tree'> <!--第一级--> <ul> <li class='safa-tree-node'> <span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i><input type='text' name='name'/></span> <!--第二级--> <ul> <li class='safa-tree-node'> <span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i><input type='text' name='name'/></span> <!--第三级--> <ul> <li class='safa-tree-node'> <span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i><input type='text' name='name'/></span> <!--第四级--> <ul> <li class='safa-tree-node'> <span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i><input type='text' name='name'/></span> <!--第五级--> <ul> <li class='safa-tree-node safa-tree-end'> <span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i><input type='text' name='name'/></span> </li> <li class='safa-tree-node safa-tree-add'><span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i>添加标签</span></li> </ul> </li> <li class='safa-tree-node safa-tree-add'><span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i>添加标签</span></li> </ul> </li> <li class='safa-tree-node safa-tree-add'><span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i>添加标签</span></li> </ul> </li> <li class='safa-tree-node safa-tree-add'><span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i>添加标签</span></li> </ul> </li> </ul> </div> <script src='https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js'></script> <script> $(function (){ var fontSize=parseInt($('.safa-tree').css('font-size')) $('.safa-tree') // 点击添加按钮 .on('click','.safa-tree-add',function (e){ var isEnd=false // 父元素有4层的话 , 当前是第5层 if($(this).parents('.safa-tree-node').length>=4){ isEnd=true } $(this) .before("<li class='safa-tree-node "+(isEnd?'safa-tree-end':'')+"'><span><i class='fa fa-plus-square'></i><i class='fa fa-square-o'></i><input type='text' name='name'/></span></li>") .prev().find('input').focus() }) .on('click','input',function (e){ e.stopPropagation() }) // 点击到展开的按钮上 .on('click','.safa-tree-node.on>span',function (e){ var li=$(this).parent() li.removeClass('on') boxClearHeight(li) }) // 点击到没展开的按钮上 .on('click','.safa-tree-node:not(.on)>span',function (e){ var li=$(this).parent() var ul=$(this).next() // 有点开的按钮的话先折叠展开的按钮 var open=li.siblings('.on') if(open.length){ open.removeClass('on') boxClearHeight(open) } if(ul.length){ li.addClass('on') boxAddHeight(li,ul.prop('offsetHeight')) } }) function boxAddHeight(the,ulHeight){ the.css('height',the.prop('offsetHeight')+ulHeight+fontSize*1.5) the.parents('.safa-tree-node').each(function (){ $(this).css('height',this.offsetHeight+ulHeight+fontSize*1.5) }) } function boxClearHeight(the){ var oldHeight=the.prop('offsetHeight') the.css('height','') the.parents('.safa-tree-node').each(function (){ $(this).css('height','-='+(oldHeight-the.prop('offsetHeight'))) }) } }) </script> </body> </html> ```

请求大佬支援！！！！为什么我设置的盒子的大小和代码设置的大小不一样

 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>tab栏切换</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*去除页面原有边距*/ margin: 0; padding: 0; } .wrapper{/*定义标题盒子*/ width: 400px; height: 33px; margin: 100px auto; border: 1px solid red; } .tab-item{/*标题栏设置*/ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } .active{/*标题栏选中状态*/ border-top: 3px solid red; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> </div> </body> <script> // 需求：给tab栏的每一个li标签设置鼠标移入事件：当前li添加active类，其他的兄弟li移除active类 $(function(){ // 给当前索引栏引入一致的div，让他添加selected类，其他的兄弟div移除selected类 $('.tab>.tab-item').mouseenter(function(){ $(this).addClass('active').siblings('li').removeClass('active'); }); $('.tab>.tab-item').mouseleave(function(){ $(this).removeClass('active'); }); }); </script> </html> ```

请求大佬支援！！！display:block和display:none在一起的时候不是会覆盖none吗？

## 我的display:block没有覆盖display:none  ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>tab栏切换</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*去除页面原有边距*/ margin: 0; padding: 0; } .wrapper{/*定义标题盒子*/ width: 326px; height: 29px; margin: 100px auto; border: 1px solid red; } .products{/*定义产品盒子*/ width: 1200px; height: 500px; margin: 0px auto; border: 1px solid #931CBB; } .tab-item{/*标题栏设置*/ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } .active{/*标题栏选中状态*/ border-top: 3px solid red; } .selected{/*显示产品*/ display: block; } .main{/*隐藏产品*/ display: none; } img{/*定义图片*/ float: left; width: 600px; height: 250px; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> </div> <div class="products"> <div class="main"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/2.png"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/5.png"> <img alt="" src="../../../图片/黄昏少女/11.png"> <img alt="" src="../../../图片/黄昏少女/8.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/1.png"> <img alt="" src="../../../图片/黄昏少女/2.png"> <img alt="" src="../../../图片/黄昏少女/3.png"> <img alt="" src="../../../图片/黄昏少女/4.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> </div> </div> </body> <script> // 需求1：给tab栏的每一个li标签设置鼠标移入事件：当前li添加active类，其他的兄弟li移除active类 // 需求2：给当前索引栏引入一致的div，让他添加selected类，其他的兄弟div移除selected类 $(function(){ $('.tab>.tab-item').mouseenter(function(){ $(this).addClass('active').siblings('li').removeClass('active'); // 获取当前这个li标签的索引 var index1=$(this).index(); console.log(index1); // 需求2： $('.products>.main').eq(index1).addClass('selected').siblings('div').removeClass('selected'); }); $('.tab>.tab-item').mouseleave(function(){ $(this).removeClass('active'); }); }); </script> </html> ```

如何解决下拉菜单被遮罩（flex布局，bootstrap导航栏组件）大神救救我

## 下拉菜单被遮罩（flex布局，bootstrap导航栏组件）如何解决 ### 尝试过设置z-index 没解决  ### test.html ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--保证缩放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <!-- 引入bootstrap--> <link rel="stylesheet" type="text/css" href="bootstrap/3.3.7/css/bootstrap.min.css" /> <script type="text/javascript" src="bootstrap/3.3.7/js/jquery-3.3.1.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 引入自定义样式 --> <link rel="stylesheet" href="css/test.css"> <!-- 添加网站图标 --> <link rel="icon" href="img/water.ico" type="image/x-icon" /> <link rel="shortcut icon" href="img/water.ico" type="image/x-icon" /> <title>ouc-污水分析-about</title> </head> <body class="bg-img"> <!-- Static navbar --> <nav class="zmost navbar navbar-inverse navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">ouc-污水分析</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a href="index.html">Home</a> </li> <li class="active"> <a href="about.html">About</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User<span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> </div> </nav> <!-- About info --> <div class="container about zless"> <h1 class="about-title flex-center-block">网站声明</h1> <p class="about-content flex-center-block"> 污水处理按照其作用可分为物理法、生物法和化学法三种。 ①物理法：主要利用物理作用分离污水中的非溶解性物质，在处理过程中不改变化学性质。常用的有重力分离、离心分离、反渗透、气浮等。物理法处理构筑物较简单、经济，用于村镇水体容量大、自净能力强、污水处理程度要求不高的情况。 ②生物法：利用微生物的新陈代谢功能，将污水中呈溶解或胶体状态的有机物分解氧化为稳定的无机物质，使污水得到净化。常用的有活性污泥法和生物膜法。生物法处理程度比物理法要高。 ③化学法：是利用化学反应作用来处理或回收污水的溶解物质或胶体物质的方法，多用于工业废水。常用的有混凝法、中和法、氧化还原法、离子交换法等。化学处理法处理效果好、费用高，多用作生化处理后的出水，作进一步的处理，提高出水水质。 </p> </div> <!-- footer --> <div class="footer">@Copyright-中国海洋大学</div> </body> </html> ``` ### test.css ``` bg-img { background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; } body { display: flex; flex-direction: column; justify-content: space-between; height: calc(100vh); min-width: 380px; min-height: 680px; } .footer { height: 50px; width: 100%; background-color: #222; text-align: center; color: rgb(157, 157, 157); font-family: Arial; font-size: large; letter-spacing: 1px; line-height: 50px; } flex-header { /*background-color: lightblue;*/ } .flex-container{ /*background-color: lightgreen;*/ } .flex-footer { /*background-color: lightblue;*/ } .flex-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } .flex-center-block { padding-right: 15px; padding-top: 15px; display: flex; align-items: center; justify-content: center; } .about{ padding-bottom: 15%; } .about-title { letter-spacing: 0.5em; font-family: "宋体"; font-weight: bold; } .about-content { font-size: large; padding: 0% 10%; line-height: 3em; letter-spacing: 0.1em; text-indent: 5% } ```

用before插入一段元素代码时遇到空格怎么处理

在做一个button按钮的添加功能，添加内容如下 ``` function addItem() { $("#addItemBtn").before("<li>" + "<div class= " + "item-content" + " >" + "<div class=" + "item-inner" + ">" + "<div class=" + "item-title label" + ">"+ "<i class="+"fa fa-minus-circle"+" style="+"font-size:1rem;margin-left:1rem;color:red" +"></i>"+ "</div > " + "<div class="+"item-input"+">"+ "<input type="+"text " +"placeholder="+"点击输入投票问题" +" />"+ "</div>"+ "</div>"+ "</div >"+ "</li >") } ``` 在div class=item-title label和 i class=fa fa-minus-circle这两处应该怎么处理 直接用空格的话在浏览器中跑到了引号外面 

请求大佬支援！！为什么我的标题栏切换，内容却不会切换？

## **display:block和display:none在一起的时候不是会覆盖none吗？**  ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>tab栏切换</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*去除页面原有边距*/ margin: 0; padding: 0; } .wrapper{/*定义标题盒子*/ width: 326px; height: 29px; margin: 100px auto; border: 1px solid red; } .products{/*定义产品盒子*/ width: 1200px; height: 500px; margin: 0px auto; border: 1px solid #931CBB; } .tab-item{/*标题栏设置*/ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } .active{/*标题栏选中状态*/ border-top: 3px solid red; } .selected{/*显示产品*/ display: block; } .main{/*隐藏产品*/ display: none; } img{/*定义图片*/ float: left; width: 600px; height: 250px; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> </div> <div class="products"> <div class="main"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/2.png"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/5.png"> <img alt="" src="../../../图片/黄昏少女/11.png"> <img alt="" src="../../../图片/黄昏少女/8.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/1.png"> <img alt="" src="../../../图片/黄昏少女/2.png"> <img alt="" src="../../../图片/黄昏少女/3.png"> <img alt="" src="../../../图片/黄昏少女/4.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> </div> </div> </body> <script> // 需求1：给tab栏的每一个li标签设置鼠标移入事件：当前li添加active类，其他的兄弟li移除active类 // 需求2：给当前索引栏引入一致的div，让他添加selected类，其他的兄弟div移除selected类 $(function(){ $('.tab>.tab-item').mouseenter(function(){ $(this).addClass('active').siblings('li').removeClass('active'); // 获取当前这个li标签的索引 var index1=$(this).index(); console.log(index1); // 需求2： $('.products>.main').eq(index1).addClass('selected').siblings('div').removeClass('selected'); }); $('.tab>.tab-item').mouseleave(function(){ $(this).removeClass('active'); }); }); </script> </html> ```

微信公众号拍照上传多张图片接口

# 现在可以往数据库存储多张照片，但是调用不了拍照接口 ``` <div class="container"> <div class="weui_cells weui_cells_form"> <div class="weui_cell"> <div class="weui_cell_bd weui_cell_primary"> <div class="weui_uploader"> <div class="weui_uploader_hd weui_cell"> <img alt="img" src="/szgmjk/image/icon5.png"> &emsp; <div class="weui_cell_bd weui_cell_primary">现场拍照</div> <div class="weui_cell_ft js_counter">0/6</div> </div> <div class="weui_uploader_bd"> <ul class="weui_uploader_files js_previews"> <!-- 预览图插入到这 --> </ul> <div class="weui_uploader_input_wrp"> <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""> </div> </div> </div> </div> </div> </div> </div> <div class="preview"> <div class="weui_mask"></div> <img src="" alt="" /> <a href="javascript:;" class="delete" id="delete">delete</a> </div> //拍照上传接口 // codepen 没办法直接在 body 标签加属性，所以用这里用 js 给 body 添加 ontouchstart 属性来触发 :active document.body.setAttribute('ontouchstart', ''); $(function () { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; //10MB var maxSize = 10 * 1024 * 1024; // 图片最大宽度 var maxWidth = 300; // 最大上传图片数量 var maxCount = 6; var images = []; $('.js_file').on('change', function (event) { var files = event.target.files; // 如果没有选中文件，直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; i++) { var file = files[i]; var reader = new FileReader(); // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { $.weui.alert('该类型不允许上传'); continue; } if (file.size > maxSize) { $.weui.alert('图片太大，不允许上传'); continue; } if ($('.weui_uploader_file').length >= maxCount) { $.weui.alert('最多只能上传' + maxCount + '张图片'); return; } reader.onload = function (e) { var img = new Image(); img.onload = function () { // 不要超出最大宽度 var w = Math.min(maxWidth, img.width); // 高度按比例计算 var h = img.height * (w / img.width); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var base64 = canvas.toDataURL('image/png'); var base65 = canvas.toDataURL('image/png'); var base66 = canvas.toDataURL('image/png'); var base67 = canvas.toDataURL('image/png'); var base68 = canvas.toDataURL('image/png'); var base69 = canvas.toDataURL('image/png'); document.getElementById("picture").value = base64; document.getElementById("picture2").value = base65; document.getElementById("picture3").value = base66; document.getElementById("picture4").value = base67; document.getElementById("picture5").value = base68; document.getElementById("picture6").value = base69; // 插入到预览区 var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>'); $('.weui_uploader_files').append($preview); var num = $('.weui_uploader_file').length; $('.js_counter').text(num + '/' + maxCount); images.push(base64); // 然后假装在上传，可以post base64格式，也可以构造blob对象上传 var progress = 0; function uploading() { $preview.find('.weui_uploader_status_content').text(++progress + '%'); if (progress < 100) { setTimeout(uploading, 30); } else { // 如果是失败，塞一个失败图标 //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>'); $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove(); } } setTimeout(uploading, 30); }; img.src = e.target.result; }; reader.readAsDataURL(file); } }); $('.js_previews').on('click', '.weui_uploader_file', function(event){ var index = $(this).index(); var img = images[index]; $('.preview').find('img').attr('src', img); $('.preview').show(); }); }); $(function() { var msg = $("#msg").val(); if (msg != "" && msg.length > 0) { $.alert(msg); } var max = 200; $('#textarea').on( 'input', function() { var text = $(this).val(); var len = text.length; $('#count').text(len); if (len > max) { $(this).closest('.weui_cell').addClass( 'weui_cell_warn'); } else { $(this).closest('.weui_cell').removeClass( 'weui_cell_warn'); } }); }); ``` 求解决，怎么在上传多张图片代码中和拍照接口结合， 如有解决，请留下支付方式，另有重谢。

jq的点击事件没有反应，加入购物车那里，完全没有反应，alert都出不来，这是为什么？

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script th:src="@{jquery/jquery-1.10.2.js}" type="text/javascript"></script> <link rel="stylesheet" th:href="@{css/mui.min.css}"> <link rel="stylesheet" th:href="@{css/home.css}"> <link rel="stylesheet" type="text/css" th:href="@{css/icons-extra.css}" /> <link rel="stylesheet" type="text/css" th:href="@{css/app.css}" /> <title>食品网</title> <link href="favicon.ico" type="image/x-icon" rel="icon"> <link th:href="@{iTunesArtwork@2x.png}" sizes="114x114" rel="apple-touch-icon-precomposed"> <style> html, body { background-color: #efeff4; } .mui-bar .mui-pull-left .mui-icon { padding-right: 5px; font-size: 28px; } .mui-bar .mui-btn { font-weight: normal; font-size: 17px; } .mui-bar .mui-btn-link { top: 1px; } .mui-content img { width: 100%; } .hm-description { margin: 15px; } .hm-description>li { font-size: 14px; color: #8f8f94; } .shou{ color:#ff3300; } </style> </head> <body> <header id="header" class="mui-bar mui-bar-transparent"> <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left" style="color:#666"></a> <h1 class="mui-title"></h1> <a class="mui-icon mui-icon-paperplane mui-pull-right" style="color: #666"></a> </header> <div class="mui-content" style="background: #fff"> <div id="slider" class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"> <a href="#"> <img th:src="${food.image1}"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> </div> </div> <div class="aui-title-h b-line"> <h3 th:text="${food.fname}"></h3> <p th:text="${food.fdetail}"></p> <em th:text="'¥'+${food.fprice}"></em> <i th:text="'价格¥'+${food.fprice}"></i> <div class="aui-title-sp "> <span class="mui-icon-extra mui-icon-extra-heart" th:text="'销量 '+${food.salesvolume}"></span> <span class="mui-icon-extra mui-icon-extra-heart" th:text="'收藏 '+${food.collection}"></span> <span class="mui-icon-extra mui-icon-extra-heart">美食快递</span> </div> </div> <div class="devider b-line"></div> <div class=""> <div style="padding: 0 10px; margin-top: 10px" class=""> <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary"> <a class="mui-control-item mui-active" href="#item1">食品详情</a> <a class="mui-control-item" href="#item2">材料</a> <a class="mui-control-item" href="#item3">食品评价</a> </div> </div> <div> <div id="item1" class="mui-control-content mui-active" style="height: 1200px"> <div class="aui-p"> <p th:text="${food.fname}"></p> </div> <div class="aui-kill aui-op"> <img th:src="${food.image2}" alt=""> </div> <div class="aui-kill aui-op"> <img th:src="${food.image3}" alt=""> </div> <div class="aui-kill aui-op"> <img th:src="${food.image4}" alt=""> </div> </div> <input type="hidden" id="fid" name="fid" th:value="${food.fid}" /> <!-- <input type="hidden" id="num" name="num" th:value="${num}" /> --> <div id="item2" class="mui-control-content"> <ul class="mui-table-view " th:each="materiallist:${materiallist}"> <li class="mui-table-view-cell b-line" th:text="${materiallist}"></li> </ul> </div> <div id="item3" class="mui-control-content" style="text-align:center">评价</div> </div> </div> <div style="height: 900px"></div> </div> <div style="height: 50px"></div> <nav class="mui-bar mui-bar-tab"> <div class="t-line aui-on-cell"> <div class="aui-ons"> <a href="#"><span class="mui-icon-extra mui-icon-extra-addpeople"></span><i>客服</i></a> <a href="#"><span class="mui-icon-extra mui-icon-extra-university"></span><i>店铺</i></a> <a href="#"><span class="mui-icon-extra mui-icon-extra-heart-filled " id="obj" onclick="ou(this)"></span><i>收藏</i></a> </div> <input type="hidden" id="hh" value="收藏"/> <div class="aui-onc"> <a href="#" style="margin-right: -4px" name="btn" id="btn">加入购物车</a> <a th:href="@{./toOneOrder(fid=${food.fid})}" class="aui-got">立即购买</a> </div> </div> </nav> <script th:src="@{js/mui.min.js}"></script> <script> // mui.init({ swipeBack: true //启用右滑关闭功能 }); (function($) { $('#scroll').scroll({ indicators: true //是否显示滚动条 }); var segmentedControl = document.getElementById('segmentedControl'); $('.mui-input-group').on('change', 'input', function() { if (this.checked) { var styleEl = document.querySelector('input[name="style"]:checked'); var colorEl = document.querySelector('input[name="color"]:checked'); if (styleEl && colorEl) { var style = styleEl.value; var color = colorEl.value; segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color; } } }); })(mui); </script> <script type="text/javascript"> $(function(){ var num=document.getElementById("num").value var obj=document.getElementById("obj") if(num==0){ $(obj).removeClass('shou'); }else{ $(obj).addClass('shou'); } }); function ou(obj){ console.log($(obj).hasClass('shou')); if($(obj).hasClass('shou')==true){ $(obj).removeClass('shou'); var gid=document.getElementById("fid").value $.ajax({ url:"./delcollection", data:{"fid":gid}, type:"post", success: function (data) { } }); }else { var gid=document.getElementById("fid").value $(obj).addClass('shou'); $.ajax({ url:"./collection", data:{"fid":gid}, type:"post", success: function (data) { if(data=="error"){ alert("未登录，不能收藏！") window.location.href="login.html" } } }); } } function addCard(){ alert("hhhh") var gid=$("#fid").val(); $.ajax({ url:"./addcar", data:{"fid":gid}, type:"post", success: function (data) { if(data=="error"){ alert("未登录，不能添加！") window.location.href="login.html" } } }); } (function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq对象，要在那个html标签上显示 str: "+1", //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>" startSize: "12px", //动画开始的文字大小 endSize: "30px", //动画结束的文字大小 interval: 600, //动画时间间隔 color: "red", //文字颜色 callback: //回调函数 }, options); $("body").append("<span class='num'>" + options.str + "</span>"); var box = $(".num"); var left = options.obj.offset().left + options.obj.width() / 2; var top = options.obj.offset().top - options.obj.height(); box.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": options.startSize, "line-height": options.endSize, "color": options.color }); box.animate({ "font-size": options.endSize, "opacity": "0", "top": top - parseInt(options.endSize) + "px" }, options.interval, function () { box.remove(); options.callback(); }); } }); })(jQuery); function niceIn(prop){ prop.find('i').addClass('niceIn'); setTimeout(function(){ prop.find('i').removeClass('niceIn'); },1000); } $(function () { $("#btn").click(function () { alert("1111111111") $.tipsBox({ obj: $(this), str: "+1", callback: function () { } }); niceIn($(this)); }); }); </script> <script type="text/javascript"> mui.init({ swipeBack: true //启用右滑关闭功能 }); var slider = document.getElementById("slider"); mui('.mui-input-group').on('change', 'input', function() { if (this.checked) { switch (this.value) { case 'static': document.getElementById("img1").className = ""; document.getElementById("slider").classList.add("mui-hidden"); break; case 'slider': document.getElementById("img1").className = "mui-hidden"; if(slider.classList.contains("mui-hidden")){ document.getElementById("slider").classList.remove("mui-hidden"); } break; } } }); </script> </body> </html>

DOM对象操作为什么只能对一个页面有效果，其他页面不行？

我建了两个页面，分别命名为index.html（主页）和about.html.然后将javascript代码命名为 global.js,里面同时包含操控这两个页面的函数。将global.js同时插入到两个页面的body标签最后。 结果是作用于index.html页面的函数一切工作正常，但作用于about.html页面的函数却不起作用。求解释。 index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>TEST</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/index.css" /> </head> <body> <header> <div id="logos"> <img id="logo" src="images/logo.jpg" alt="SIEA" /> <a href="http://www.zju.edu.cn/" class="linklogo"><img src="images/school.gif" alt="浙江大学" /></a> <a href="http://oc.zju.edu.cn/" class="linklogo"><img src="images/collage.gif" alt="海洋学院" /></a> </div> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="arrangement.html">Arrangement</a></li> </ul> </nav> </header> <article> <h1>Welcome</h1> <p> <span>T</span>oday,we are going to introduce some kinds of fruits. The first type of fruit is the <a href="#" title="apple">Apple</a>.The second type of fruit is the <a href="#" title="banana"> Banana</a>.The last type of fruit is the <a href="#" title="cherry">Cherry</a>.We all love eating fruits. Let us have a look!!! </p> <div id="slideshow"> <img src="images/fruits.jpg" alt="fruits" id="preview" /> </div> </article> <footer> <p>Designed by <abbr title="Zhejiang University">ZJU</abbr> Mareine Geology Lab</p> </footer> <script src="scripts/global.js"></script> </body> </html> ``` about.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>TEST</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/about.css" /> </head> <body> <header> <div id="logos"> <img id="logo" src="images/logo.jpg" alt="SIEA" /> <a href="http://www.zju.edu.cn/" class="linklogo"><img src="images/school.gif" alt="浙江大学" /></a> <a href="http://oc.zju.edu.cn/" class="linklogo"><img src="images/collage.gif" alt="海洋学院" /></a> </div> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="arrangement.html">Arrangement</a></li> </ul> </nav> </header> <article> <h1>About the band</h1> <nav> <ul> <li><a href="#jay">Jay Skript</a></li> <li><a href="#domsters">The Domsters</a></li> </ul> </nav> <section id="jay"> <h2>Jay Skript</h2> <p>Jay Skript is going to rock your world!</p> <p>Together with his compatriots the Domsters, Jay is set for world domination. Just you wait and see. </p> <p>Jay Skript has been on the scene since the mid 1990s. His talent has not always been recognized or fully appreciated. In the early days, he was ofen unfavorably compared to bigger, similarly named artists. That is all in the past now.</p> </section> <section id="domsters"> <h2>The Domsters</h2> <p>The Domsters have been around, in one form or another, for almost as long. it is only in the past few years that the Domsters have settled down to their current, stable lineup. Now they're a rock-solid bunch: methodical and dependable.</p> </section> </article> <footer> <p>Designed by <abbr title="Zhejiang University">ZJU</abbr> Mareine Geology Lab</p> </footer> <script src="scripts/global.js"></script> </body> </html> ``` global.js ``` function addLoadEvent(func) //将函数添加到window.onload事件中 { var oldonload=window.onload; if (typeof window.onload!='function') { window.onload=func; }else { window.onload= function(){ oldonload(); func(); } } } function insertAfter(newElement,targetElement) //在元素后面插入元素 { var parent=targetElement.parentNode; if (parent.lastChild==targetElement) { parent.appendChild(newElement); }else { parent.insertBefore(newElement,targetElement.nextSibling); } } function addclass(element,value) //为元素加类 { if (!element.className) { element.className=value; }else { newClassName=element.className; newClassName+=' '; newClassName+=value; element.className=newClassName; } } function highlightPage() //作用于所有页面，使当前页面的导航按钮高亮 { if (!document.getElementsByTagName) return false; var headers=document.getElementsByTagName('header'); if (headers.length==0) return false; var navs=headers[0].getElementsByTagName('nav'); if (navs.length==0) return false; var links=navs[0].getElementsByTagName('a'); if (links.length==0) return false; for (var i=0;i<links.length;i++) { linkurl=links[i].getAttribute("href"); if (window.location.href.indexOf(linkurl)!=-1) { links[i].className="here"; } } } function moveElement(elementID,final_x,final_y,interval) //作用于index页面，使元素移动 { if (!document.getElementById) return false; var elem=document.getElementById(elementID); if (!elem) return false; if (elem.movement) clearTimeout(elem.movement) var xpos=parseInt(elem.style.left); var ypos=parseInt(elem.style.top); if (xpos==final_x && ypos==final_y) return true; if (xpos<final_x) xpos++; if (xpos>final_x) xpos--; if (ypos<final_y) ypos++; if (ypos>final_y) ypos--; elem.style.top=ypos+'px'; elem.style.left=xpos+'px'; var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement=setTimeout(repeat,interval); } function prepareSlideshow() //作用于index页面，使元素的移动与鼠标事件挂钩（冲突函数） { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; var preview=document.getElementById('preview'); preview.style.position="absolute"; preview.style.top="0px"; preview.style.left="0px"; var articles=document.getElementsByTagName('article'); if (articles.length==0) return false; var ps=articles[0].getElementsByTagName('p'); if (ps.length==0) return false; var links=ps[0].getElementsByTagName('a'); if (links.length==0) return false; links[0].onmouseover=function(){ moveElement("preview",0,0,10); } links[1].onmouseover=function(){ moveElement("preview",-325,0,10); } links[2].onmouseover=function(){ moveElement("preview",-640,0,10); } } function showSection(id) //作用于about页面，使当前章节显示 { if (!document.getElementById) return false; if (!document.getElementsByTagName) return false; var articles=document.getElementsByTagName('article'); if (articles.length==0) return false; var sections=articles[0].getElementsByTagName('section'); if (sections.length==0) return false; for (var i=0;i<sections.length;i++) { if (sections[i].getAttribute('id')==id) sections[i].style.display='block'; else sections[i].style.display='none'; } } function prepareInternalnav() //作用于about页面，使显示函数与鼠标点击事件挂钩（冲突函数） { if (!document.getElementsByTagName) return false; var articles=document.getElementsByTagName('article'); if (articles.length==0) return false; var navs=articles[0].getElementsByTagName('nav'); if (navs.length==0) return false; var links=navs[0].getElementsByTagName('a'); if (links.length!=2) return false; links[0].destination=links[0].getAttribute('href').split('#')[1]; links[1].destination=links[1].getAttribute('href').split('#')[1]; document.getElementById(links[0].destination).style.display='none'; document.getElementById(links[1].destination).style.display='none'; links[0].onclick=function(){ showSection(links[0].destination); return false; } links[1].onclick=function(){ showSection(links[1].destination); return false; } } addLoadEvent(highlightPage); //addLoadEvent(prepareSlideshow); //将一个index页面的函数屏蔽，则about页面函数运行正常 addLoadEvent(prepareInternalnav); ```

菜单列表的收缩和重复的问题。。。。醉了。。

 ``` <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //导航切换 $(".menuson .header").click(function(){ var $parent = $(this).parent(); $(".menuson>li.active").not($parent).removeClass("active open").find('.sub-menus').hide(); $parent.addClass("active"); if(!!$(this).next('.sub-menus').size()){ if($parent.hasClass("open")){ $parent.removeClass("open").find('.sub-menus').hide(); }else{ $parent.addClass("open").find('.sub-menus').show(); } } }); // 三级菜单点击 $('.sub-menus li').click(function(e) { $(".sub-menus li.active").removeClass("active") $(this).addClass("active"); }); $('.title').click(function(){ var $ul = $(this).next('ul'); $('dd').find('.menuson').slideUp(); if($ul.is(':visible')){ $(this).next('.menuson').slideUp(); }else{ $(this).next('.menuson').slideDown(); } }); }) </script> <script> //页面载入加载所有的一级菜单 $(function(){ //从session作用域中获取当前用户的角色id(rid) var rid = ${UserInfo.role.rid}; //利用jquery的ajax去数据库中查询所有的一级菜单 $.get("user.action",{operation:'loadMenu',rid:rid,pmid:0},function(result){ //判断result非空 if(result != ""){ //将json字符串数组转换成json对象数组 var menuList = JSON.parse(result); //遍历menuList if(menuList.length>0){ for(var i=0;i<menuList.length;i++){ var menu = menuList[i]; //在菜单选项显示部分添加一级菜单 $("#lm").append("<dd><div class='title' onclick='load("+rid+","+menu.mid+");'><span><img src='images/leftico04.png' /></span>"+menu.mname+"</div><ul class='menuson' id='"+menu.mid+"'></ul></dd>"); } } } }); }); //当单击一级菜单时加载二级菜单 function load(userRid,pmid){ var $ul = $(this).next('ul'); $('dd').find('.menuson').slideUp(); if($ul.is(':visible')){ $(this).next('.menuson').slideUp(); }else{ $(this).next('.menuson').slideDown(); } //清空ul标签内容 $("#"+pmid).empty();--------------------------这个就是表明需要清空以前看过的菜单意思就是不会出现重复的菜单。。但是一开始这个是可以的，后来不知道为甚什么不起作用了。。 //利用ajax查询二级菜单内容 $.get("user.action",{operation:'loadMenu',rid:userRid,pmid:pmid},function(result){ //判断result非空 if(result != ""){ //将json字符串数组转换成json对象数组 var menuList = JSON.parse(result); //遍历menuList if(menuList.length>0){ for(var i=0;i<menuList.length;i++){ var menu = menuList[i]; //在菜单选项显示部分添加二级菜单 $("#"+pmid).append("<li><cite></cite><a href='"+menu.url+"' target='rightFrame'>"+menu.mname+"</a><i></i></li>"); } } } }); $("#"+pmid).slideDown(); } </script> </head> <body style="background:#f0f9fd;"> <div class="lefttop"><span></span>系统功能</div> <dl class="leftmenu" id="lm"> <!-- <dd><div class="title"><span><img src="images/leftico04.png" /></span>用户管理</div> <ul class="menuson"> <li><cite></cite><a href="#">查询所有用户信息</a><i></i></li> <li><cite></cite><a href="#">添加用户信息</a><i></i></li> <li><cite></cite><a href="#">其他</a><i></i></li> </ul> </dd> --> </dl> </body> </html> ``` 一开始好好的，那个清空ul的标签内容是可以运行的，菜单不会重复，但是不知道后来怎么了，就变得开始重复了。。。。 ```  不清楚这是怎么了,为什么突然间代码不起作用了。。？？

Js制作anki模版,在PC和电脑没问题，但在安卓为什么不行？

诸位大神你们好 ，我并不是程序员，只是在使用anki（一个记忆软件）中有些问题想请大家帮忙看一下  这是我下的模版，制作的题库 四个选型每次打开顺序不一样，如果答错了，会出现下图  而且最上面会有统计数据，但是在PC和苹果都可以正常显示，在安卓手机上，无论你选什么答案，都只会出现正确答难，不会出现上面图片答错选项的红色删除线，而且统计数据都是100%, 下图是添加卡片的样子  正面模版 ``` <div class="text">{{cloze:Question}}</div> {{#Options}} <ol class="options" id="optionList"> <!--options第一行为正确答案，每次会随机组合选项，每个选项以换行符分隔，选项中用换行符请用<br>标签--> </ol> <!--下面的div用来传递选项参数，土办法--> <div id="options" style="display:none">{{Options}}</div> <script> //向head添加一个全局变量mc来进行正反卡片传值 if(typeof(mc)=="undefined"){ var script=document.createElement('script') script.innerHTML="var mc={correct:0,total:0,list:'',checked:''}" document.head.appendChild(script) } mc.total++ showOptions() //移动端显示radio组件 if(typeof(ankiPlatform)=="undefined"){ var options=document.querySelectorAll("input[name='options']") for(var i in options){ options[i].style.display='inline' } } </script> {{/Options}} ``` 中间格式刷 ``` </style><!--填充Anki默认style--> <style> .card { font-family: Arial; font-size: 17px; text-align: left; color: white; background-color: #272822; } div{ margin:5px auto } .text{ color:#e6db74; text-align:left; } .hint{ color:#a6e22e; } .extra{ margin-top:15px; font-size:16px; color: #eeeebb; text-align:left; } .cloze { font-weight: bold; color: #a6e22e; } .wrong { font-weight: 400; text-decoration:line-through; color: #f92672; } .options{ list-style:upper-latin; } .options *{ cursor:pointer; } .options *:hover{ font-weight:bold; } .options li{ margin-top:5px; } .options input[name="options"]{ display:none; } /*定位正确率展示条*/ #performance{ text-align:center; font-size:12px; margin-top:0px; } </style> <script> function showOptions(){ var optionOl=document.getElementById("optionList") var options=document.getElementById("options") var s=0 var indexs=[] var optionList="" options=options.innerHTML options=options.replace(/<\/?div>/g,"\n") options=options.replace(/\n+/g,"\n") options=options.replace(/<br.*?>/g,"\n") //去除首尾换行符 options=options.replace(/^\n/,"") options=options.replace(/\n$/,"") //以换行符分隔选项为数组 options=options.split("\n") //随机组合选项 for(var key in options){ do{ s=Math.random()*(options.length) s=Math.floor(s) if(indexs.join().indexOf(s.toString())==-1){ indexs.push(s) break } }while(true) if(s==0){ optionList+="<li id='optionTrue'>"+"<label for=option"+s+" >"+options[s]+"</label>"+"<input onclick='showAns(this)' type='radio' name='options' id=option"+s+" />"+"</li>" }else{ optionList+="<li>"+"<label for=option"+s+" >"+options[s]+"</label>"+"<input type='radio' onclick='showAns(this)' name='options' id=option"+s+" />"+"</li>" } } optionOl.innerHTML=optionList //把列表存到mc中 if(typeof(mc)!="undefined"){ mc.list=optionOl.innerHTML } } function showAns(radio){ if(typeof(mc)=="undefined") return var optionOl=document.getElementById("optionList") mc.list=optionOl.innerHTML mc.checked=radio.id //判断是否选择正确 if(radio.id=='option0'){ mc.correct++ } try{ pycmd("ans") }catch(e){} } function getOptions(){ var optionOl=document.getElementById("optionList") //判断是否有mc变量 if(typeof(mc)!="undefined" ){ optionOl.innerHTML=mc.list //标出选择项目,默认为错误 if(mc.checked){ var optionChecked=document.getElementById(mc.checked) optionChecked.parentNode.className="wrong" optionChecked.checked=true mc.checked='' } }else{ showOptions() } //高亮答案选项 var optionTrue=document.getElementById("optionTrue") optionTrue.className="cloze" var radios=document.getElementsByName("options") for(var i in radios){ radios[i].disabled=true } } </script> ``` 背面模版 ``` <div id="performance">正确率：100%</div> <div class="text">{{cloze:Question}}</div> {{#Options}} <ol class="options" id="optionList"></ol> <div id="options" style="display:none">{{Options}}</div> <script> getOptions() </script> {{/Options}} {{#Extra}} <hr> <div class="extra">{{Extra}}</div> {{/Extra}} <script> //显示正确率 var performance=document.getElementById("performance") if(typeof(mc)!="undefined"){ var percent=((mc.correct/mc.total)*100).toFixed(2) performance.innerHTML='本次做题数：'+mc.total+"&nbsp;正确数："+mc.correct+"&nbsp;正确率："+percent+"%" } </script> ``` 这么多代码我实在看不懂，我需要这个做题库，请大家帮忙看一下，万分感谢

在中国程序员是青春饭吗？

今年，我也32了 ，为了不给大家误导，咨询了猎头、圈内好友，以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助，记得帮我点赞哦。 目录： 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时，拿着傲人的工资，想着好好干，以为我们的人生是这样的： 等真到了那一天，你会发现，你的人生很可能是这样的： ...

《MySQL 性能优化》之理解 MySQL 体系结构

本文介绍 MySQL 的体系结构，包括物理结构、逻辑结构以及插件式存储引擎。

【资源】一个C/C++开发工程师的学习路线（已经无路可退，唯有逆风飞翔）【内附资源页】

声明： 1）该文章整理自网上的大牛和专家无私奉献的资料，具体引用的资料请看参考文献。 2）本文仅供学术交流，非商用。所以每一部分具体的参考资料并没有详细对应。如果某部分不小心侵犯了大家的利益，还望海涵，并联系博主删除。 3）博主才疏学浅，文中如有不当之处，请各位指出，共同进步，谢谢。 4）此属于第一版本，若有错误，还需继续修正与增删。还望大家多多指点。大家都共享一点点，一起为祖国科研的推进...

程序员请照顾好自己，周末病魔差点一套带走我。

程序员在一个周末的时间，得了重病，差点当场去世，还好及时挽救回来了。

20道你必须要背会的微服务面试题，面试一定会被问到

写在前面： 在学习springcloud之前大家一定要先了解下，常见的面试题有那块，然后我们带着问题去学习这个微服务技术，那么就会更加理解springcloud技术。如果你已经学了springcloud，那么在准备面试的时候，一定要看看看这些面试题。 文章目录1、什么是微服务？2、微服务之间是如何通讯的？3、springcloud 与dubbo有哪些区别？4、请谈谈对SpringBoot 和S...

达摩院十大科技趋势发布：2020 非同小可！

【CSDN编者按】1月2日，阿里巴巴发布《达摩院2020十大科技趋势》，十大科技趋势分别是：人工智能从感知智能向认知智能演进；计算存储一体化突破AI算力瓶颈；工业互联网的超融合；机器间大规模协作成为可能；模块化降低芯片设计门槛；规模化生产级区块链应用将走入大众；量子计算进入攻坚期；新材料推动半导体器件革新；保护数据隐私的AI技术将加速落地；云成为IT技术创新的中心 。 新的画卷，正在徐徐展开。...

轻松搭建基于 SpringBoot + Vue 的 Web 商城应用

首先介绍下在本文出现的几个比较重要的概念： 函数计算（Function Compute）: 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API ...

Python+OpenCV实时图像处理

目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼，这里给各位分享一个小项目，可通过摄像头实时动态查看各类图像处理的特点，也可对各位调参、测试...

2020年一线城市程序员工资大调查

人才需求 一线城市共发布岗位38115个，招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元，工资中位数为14583元，其中95%的人的工资位于5000到20000元之间。 和往年数据比较： yea...

为什么猝死的都是程序员，基本上不见产品经理猝死呢？

相信大家时不时听到程序员猝死的消息，但是基本上听不到产品经理猝死的消息，这是为什么呢？ 我们先百度搜一下：程序员猝死，出现将近700多万条搜索结果： 搜索一下：产品经理猝死，只有400万条的搜索结果，从搜索结果数量上来看，程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍，而且从下图可以看到，首页里面的五条搜索结果，其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大，并不是错...

害怕面试被问HashMap？这一篇就搞定了！

声明：本文以jdk1.8为主！ 搞定HashMap 作为一个Java从业者，面试的时候肯定会被问到过HashMap，因为对于HashMap来说，可以说是Java集合中的精髓了，如果你觉得自己对它掌握的还不够好，我想今天这篇文章会非常适合你，至少，看了今天这篇文章，以后不怕面试被问HashMap了 其实在我学习HashMap的过程中，我个人觉得HashMap还是挺复杂的，如果真的想把它搞得明明白...

毕业5年，我问遍了身边的大佬，总结了他们的学习方法

我问了身边10个大佬，总结了他们的学习方法，原来成功都是有迹可循的。

python爬取百部电影数据，我分析出了一个残酷的真相

2019年就这么匆匆过去了，就在前几天国家电影局发布了2019年中国电影市场数据，数据显示去年总票房为642.66亿元，同比增长5.4%；国产电影总票房411.75亿元，同比增长8.65%，市场占比 64.07%；城市院线观影人次17.27亿，同比增长0.64%。 看上去似乎是一片大好对不对？不过作为一名严谨求实的数据分析师，我从官方数据中看出了一点端倪：国产票房增幅都已经高达8.65%了，为什...

推荐10个堪称神器的学习网站

每天都会收到很多读者的私信，问我：“二哥，有什么推荐的学习网站吗？最近很浮躁，手头的一些网站都看烦了，想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦，梦到被老板辞退了。虽然说在我们公司，只有我辞退老板的份，没有老板辞退我这一说，但是还是被吓得 4 点多都起来了。（主要是因为我掌握着公司所有的核心源码，哈哈哈） 既然 4 点多起来，就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站，推...

这些软件太强了，Windows必装！尤其程序员！

Windows可谓是大多数人的生产力工具，集娱乐办公于一体，虽然在程序员这个群体中都说苹果是信仰，但是大部分不都是从Windows过来的，而且现在依然有很多的程序员用Windows。 所以，今天我就把我私藏的Windows必装的软件分享给大家，如果有一个你没有用过甚至没有听过，那你就赚了????，这可都是提升你幸福感的高效率生产力工具哦！ 走起！???? NO、1 ScreenToGif 屏幕，摄像头和白板...

阿里面试，面试官没想到一个ArrayList，我都能跟他扯半小时

我是真的没想到，面试官会这样问我ArrayList。

曾经优秀的人，怎么就突然不优秀了。

职场上有很多辛酸事，很多合伙人出局的故事，很多技术骨干被裁员的故事。说来模板都类似，曾经是名校毕业，曾经是优秀员工，曾经被领导表扬，曾经业绩突出，然而突然有一天，因为种种原因，被裁员了，...

大学四年因为知道了这32个网站，我成了别人眼中的大神！

依稀记得，毕业那天，我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”，哎呀，别提当时多开心啦????，嗯，我们导员是所有导员中最帅的一个，真的???? 不过，导员说的是实话，很多人都叫我大神的，为啥，因为我知道这32个网站啊，你说强不强????，这次是绝对的干货，看好啦，走起来！ PS：每个网站都是学计算机混互联网必须知道的，真的牛杯，我就不过多介绍了，大家自行探索，觉得没用的，尽管留言吐槽吧???? 社...

良心推荐，我珍藏的一些Chrome插件

上次搬家的时候，发了一个朋友圈，附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多，于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家，随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件，由于支持 Markdown 直接转电子邮...

看完这篇HTTP，跟面试官扯皮就没问题了

我是一名程序员，我的主要编程语言是 Java，我更是一名 Web 开发人员，所以我必须要了解 HTTP，所以本篇文章就来带你从 HTTP 入门到进阶，看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前，我们的电脑都是单机的，单机系统是孤立的，我还记得 05 年前那会儿家里有个电脑，想打电脑游戏还得两个人在一个电脑上玩儿，及其不方便。我就想为什么家里人不让上网，我的同学 xxx 家里有网，每...

2020 年，大火的 Python 和 JavaScript 是否会被取而代之？

Python 和 JavaScript 是目前最火的两大编程语言，但是2020 年，什么编程语言将会取而代之呢？ 作者 |Richard Kenneth Eng 译者 |明明如月，责编 | 郭芮 出品 | CSDN（ID：CSDNnews） 以下为译文： Python 和 JavaScript 是目前最火的两大编程语言。然而，他们不可能永远屹立不倒。最终，必将像其他编程语言一...

史上最全的IDEA快捷键总结

现在Idea成了主流开发工具，这篇博客对其使用的快捷键做了总结，希望对大家的开发工作有所帮助。

阿里程序员写了一个新手都写不出的低级bug，被骂惨了。

这种新手都不会范的错，居然被一个工作好几年的小伙子写出来，差点被当场开除了。

谁是华为扫地僧？

是的，华为也有扫地僧！2020年2月11-12日，“养在深闺人不知”的华为2012实验室扫地僧们，将在华为开发者大会2020（Cloud）上，和大家见面。到时，你可以和扫地僧们，吃一个洋...

AI 没让人类失业，搞 AI 的人先失业了

最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败，被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下，把消息分享给群里。 阿杰也看了消息，笑了笑。在座几位也都笑了。 王葱葱是个有名的人物，21岁那年以全额奖学金进入 KMU 攻读人工智能博士，累计发表论文 40 余篇，个人技术博客更是成为深度学习领域内风向标。 ...

2020年，冯唐49岁：我给20、30岁IT职场年轻人的建议

点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID：jishulingdaoli) 前天的推文《冯唐：职场人35岁以后，方法论比经验重要》，收到了不少读者的反馈，觉得挺受启发。其实，冯唐写了不少关于职场方面的文章，都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...

神级宝库！GitHub 标星 1.2w+，Chrome 最天秀的插件都在这里啦！

作者 | Rocky0429 来源 | Python空间 大家好，我是 Rocky0429，一个沉迷 Chrome 不能自拔的蒟蒻… 作为一个在远古时代用过什么 IE、360、猎豹等浏览器的资深器哥，当我第一次了解 Chrome 的时候，就被它的美貌给吸引住了… 就在我用了一段时间之后，我坚决的卸载了电脑上其它碍眼的浏览器，并觉得在之前的搬砖生涯中，我不配当哥，我只配是个沙雕… ...

作为一名大学生，如何在B站上快乐的学习？

B站是个宝，谁用谁知道???? 作为一名大学生，你必须掌握的一项能力就是自学能力，很多看起来很牛X的人，你可以了解下，人家私底下一定是花大量的时间自学的，你可能会说，我也想学习啊，可是嘞，该学习啥嘞，不怕告诉你，互联网时代，最不缺的就是学习资源，最宝贵的是啥？ 你可能会说是时间，不，不是时间，而是你的注意力，懂了吧！ 那么，你说学习资源多，我咋不知道，那今天我就告诉你一个你必须知道的学习的地方，人称...

那些年，我们信了课本里的那些鬼话

教材永远都是有错误的，从小学到大学，我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里，有很多是错误文章，或者说是假课文。像《斑羚飞渡》： 随着镰刀头羊的那声吼叫，整个斑羚群迅速分成两拨，老年斑羚为一拨，年轻斑羚为一拨。 就在这时，我看见，从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声，一只半大的斑羚应声走了出来。一老一少走到伤心崖，后退了几步，突...

张朝阳回应迟到 1 分钟罚 500：资本家就得剥削员工

loonggg读完需要2分钟速读仅需 1 分钟大家我，我是你们的校长。前几天，搜狐的董事局主席兼 CEO 张朝阳和搜狐都上热搜了。原因很简单，就是搜狐出了“考勤新规”。一封搜狐对员工发布...