怎么用jquery给一个li标签添加和去掉class属性

用juqery 当点击一个菜单的时候给这个菜单的li标签添加一个class属性,当点击其他菜单的时候把这个class属性再给其他菜单,让前一个菜单的class属性消失,怎么写

4个回答

<ul>
    <li>a</li>
    <li>b</li>
</ul>

这样写吧:

 $(function(){
        $("ul > li").click(function(){
             $.each($('ul > li'), function(i, o){
                    if($(this).hasClass('className')){
                            $(this).removeClass('className');
                    }
            });
                $(this).addClass('className');
    });

});
 $("li").addClass('xxx').slbings().removeClass("xxx");

$("#xxx").remove/addClass();
 <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
<style>.focus{background-color:#f00}</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $('li').click(function () { $(this).addClass('focus').siblings().removeClass('focus') })
</script>

如果你的菜单会跳转,应该获取url地址和菜单的href对比,再加css,参考:网站导航栏目焦点设置

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用jquery去除li的class
获得一个li的集合 循环去除它所有的class样式 我试不出来呢 我是先获取集合 然后遍历 每一个li[i].removeCLass(); 不起作用
求助!jquery mobile 的data-role="list-divider"使用问题!
jquery mobile 用data-role="list-divider"会自动在后面加一条<li></li>标签怎么去除掉? ``` <ul data-role="listview" id="login-me-listview" data-mini="true"> <li data-role="list-divider"></a><li> <li data-mini="true"><a href="#" class="login-me-a"><img src="img/portrait.png" class="img1"><h2>昵称</h2><p>简介:暂无介绍</p></a></li> ``` 最后变成 ``` <ul data-role="listview" id="login-me-listview" data-mini="true"> <li data-role="list-divider"></a><li> <li class="ui-li-static ui-body-inherit"></li> <li data-mini="true"><a href="#" class="login-me-a"><img src="img/portrait.png" class="img1"><h2>昵称</h2><p>简介:暂无介绍</p></a></li> ``` ![](C:\Documents and Settings\Administrator\桌面\a1.jpg)
求大神解答JQuery问题
``` <div class="layui-fluid"> <div class="layui-card"> <form class="layui-form layui-form-pane"> <div class="layui-tab layui-tab-brief"> <ul class="layui-tab-title"> <li class="layui-this">基本信息</li> </ul> <div class="layui-tab-content"> <div class="layui-form-item"> <label class="layui-form-label">供应商名称</label> <div class="layui-input-inline"> <input type="text" id="name" name="name" lay-verify="required" placeholder="输入代理商名称" autocomplete="off" class="layui-input"> </div> <label class="layui-form-label">每日额度(元)</label> <div class="layui-input-inline"> <input type="text" id="dailyAmount" name="dailyAmount" lay-verify="number" placeholder="输入线下充值费率" autocomplete="off" class="layui-input" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">入金费率%</label> <div class="layui-input-inline"> <input type="text" id="spInFeeRate" name="spInFeeRate" lay-verify="number" placeholder="" autocomplete="off" class="layui-input" value="0"> </div> <label class="layui-form-label">出金设置</label> <div class="layui-input-inline" > <input type="radio" name="spOutFeeType" value="1" title="费率" lay-filter="spOutFeeTypeFilter" checked="checked"> <input type="radio" name="spOutFeeType" value="2" title="单笔手续费" lay-filter="spOutFeeTypeFilter"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商户状态</label> <div class="layui-input-inline"> <input type="radio" name="status" value="1" title="启用" checked="checked"> <input type="radio" name="status" value="0" title="停止"> </div> </div> <div class="layui-form-item" id="feeRateId" style="display: none"> <label class="layui-form-label">出金费率(%)</label> <div class="layui-input-inline"> <input type="tel" id="spOutFeeRate" name="spOutFeeRate" placeholder="输入费率" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" id="feeLevelId" style="display: none"> <label class="layui-form-label">单笔手续费</label> <div class="layui-input-inline"> <input type="tel" id="spOutFeeEvery" name="spOutFeeEvery" placeholder="输入单笔手续费" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" style="padding-bottom: 20px;"> <button type="button" class="layui-btn" lay-submit="" lay-filter="spAdd">保存</button> <a class="layui-btn" lay-href="sp/list/">返回</a> </div> </div> </div> </form> </div> </div> <script> layui.use(['admin', 'form'],function(){ var form = layui.form ,$ = layui.$ ,admin = layui.admin ,element = layui.element ,layer = layui.layer ; element.render('breadcrumb', 'breadcrumb'); $.ajax({ type: 'POST', url: layui.setter.baseUrl + '/sp/add/post', data: { type : 'sp' }, success: function(res){ if(res.code == 0){ if(res.data.spOutFeeType == 1) { $("input[name='spOutFeeType'][value='1']").attr("checked",true); $("#feeRateId").show(); $("#feeLevelId").hide(); }else if(res.data.spOutFeeType == 2) { $("input[name='spOutFeeType'][value='2']").attr("checked",true); $("#feeRateId").hide(); $("#feeLevelId").show(); } $('#spOutFeeRate').val(res.data.spOutFeeRate); $('#spOutFeeEvery').val(res.data.spOutFeeEvery/100); form.render(); } } }) form.on('submit(spAdd)', function(data) { admin.req({ type: "POST", url: layui.setter.baseUrl + '/sp/add', data: data.field, success: function(res){ if(res.code == 0) { layer.alert(res.msg, {title: "保存成功"}, function(index){ layer.close(index); location.href = layui.setter.baseLocal + 'sp/list'; }); } } }); return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 }); form.render(); }) </script> ``` 想用JQuery选择器切换出金设置的选项,但是输入框一直出不来,不知道怎么搞,本人刚入行菜鸟,请大神们帮帮忙! 现在情况 ![图片说明](https://img-ask.csdn.net/upload/201906/26/1561526332_600122.png) 需要效果 ![图片说明](https://img-ask.csdn.net/upload/201906/26/1561526360_758946.png)
熟悉jquery及css的朋友进来帮我改进下这个tab选项卡,谢谢
大家好,我很喜欢如下这个选项卡,但是现在碰到一个问题,就是当页面中需要2个或以上个数的选项卡时会出现问题, 怎么使各个<div class="tab">相互独立,不相互影响,并在打开页面时显示[b]选项1和选项4[/b],代码如下: 请各位帮忙: [code="java"]<!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> <title>jquery实现tab淡变选项卡效果</title> <script type="text/javascript" src="jquery1.4.2.min.js"></script> <style type="text/css"> .tab { background-color: #FAFAFA; margin: 5px 8px; padding: 5px 10px; } .tab p span { background-color: #EFEFEF; border: 1px solid #CCCCCC; cursor: pointer; margin-right: 3px; padding: 2px 5px; } .tab p span.current { background-color: #FAFAFA; border-bottom-color: #fafafa; } .tab p { border-bottom: 1px solid #CCCCCC; font-weight: bold; padding: 0 8px 2px; margin: 0; } .tab ul { width:500px; background:url(tu/about.jpg) right no-repeat; margin: 2px auto 2px 8px; padding:0; } .tab li { width:300px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; margin: 2px 0; list-style-type=none; } .tab .mhot, .tab.allhot { display: none; } </style> <script type="text/javascript"> $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); }); </script> </head> <body> <p></p> <p>JS如果没加载请刷新</p> <p></p> <div class="tab"> <p> <span id="tab1">选项1</span><span id="tab2">选项2</span><span id="tab3">选项3</span></p> <ul class="tab1"> <li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="http://www.poluoluo.com" target="_blank">www.poluoluo.com</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a></li></ul> <ul class="tab2"> <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li></ul> <ul class="tab3"> <li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a> </li><li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li></ul> </div> <div class="tab"> <p> <span id="tab21">选项4</span><span id="tab22">选项5</span><span id="tab23">选项6</span></p> <ul class="tab21"> <li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="http://www.poluoluo.com" target="_blank">www.poluoluo.com</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a></li></ul> <ul class="tab22"> <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li></ul> <ul class="tab23"> <li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a> </li><li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li></ul> </div> </body> </html>[/code]
请求大佬支援!!!!为什么我设置的盒子的大小和代码设置的大小不一样
![图片说明](https://img-ask.csdn.net/upload/201905/07/1557230576_895360.png) ``` <!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> ```
新人求助!!做网页做了一个二级菜单,但是一级菜单放不进去盒子,二级菜单不对齐一级菜单
## 我的style里面的代码是外部镶入的,并不是直接写上去的 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:450px; height:30px; border:1px solid red; margin:100px auto; /*盒子居中*/ } div ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left; height:50px; text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件,二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show();//show本质上还是更新display属性为block }); // 给一级菜单li设置鼠标离开事件,二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide();//hide本质上还是更新display属性为none }); </script> </html> ``` ```
请求大佬支援!!为什么我的标题栏切换,内容却不会切换?
## **display:block和display:none在一起的时候不是会覆盖none吗?** ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557289908_404190.png) ``` <!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> ```
Jquer + jquery ui + jqgird, 3个表格, 第一个 左下角按钮不显示
html文件 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="ju/jquery-ui.min.css" /> <link rel="stylesheet" type="text/css" media="screen" href="tb/css/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="tb/plugins/searchFilter.css" /> <style> html, body {margin: 0;padding: 0; font-size: 75%;} </style> <script src="tb/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="ju/jquery-ui.min.js" type="text/javascript"></script> <script src="tb/js/i18n/grid.locale-cn.js" type="text/javascript"></script> <script src="tb/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="1.js" type="text/javascript"></script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">待审核</a></li> <li><a href="#tabs-2" onclick="pageInit(2, 1)">已接单</a></li> <li><a href="#tabs-3" onclick="pageInit(3, 404)">全部单</a></li> </ul> <div id="tabs-1"> <table id="list1"></table> <div id="pager1"></div> </div> <div id="tabs-2"> <table id="list2"></table> <div id="pager2"></div> </div> <div id="tabs-3"> <table id="list3"></table> <div id="pager3"></div> </div> </div> </body> </html> ``` 1.js 文件 ``` $(function(){ $( "#tabs" ).tabs(); pageInit(1, 0); }); function pageInit(tabnum, s){ jQuery("#list"+tabnum).jqGrid( { url: '../sub/getsublists?statue='+s, datatype : "json", colModel : [ {label:"预约单号(单号越大申请越新)", name: 'Id', index: 'Id', width: '13%', hidden:false, search:false}, {label:"客户号码", name: 'CPhone', index: 'CPhone', width: '10%' }, {label:"车牌号", name: 'CarNum', index: 'CarNum', width: '10%' }, {label:"客户备注", name: 'comments', index: 'comments', width: '30%'}, {label:"预约时间", name: 'CDate', index: 'CDate', width: '10%' }, {label:"申请时间", name: 'crateDate', index: 'crateDate', width: '10%', sortable: false}, {label:"申请状态", name: 'statue', index: 'statue', width: '5%', sortable:false,search:false, align:'center',formatter: function (cellvalue, options, rowObject){ if(rowObject.statue == 0){ return "<font color=red>待审核</font>"; }else if(rowObject.statue == 1){ return "<font color=green>已接单</font>"; }else if(rowObject.statue == 2){ return "<font >已完成</font>"; }else if(rowObject.statue == -2){ return "<font color=gray>客户取消预约</font>"; }else if(rowObject.statue == -1){ return "<font color=blue>管理员取消预约</font>"; } } }, {label:"处理师傅", name: 'Mcomments', index: 'Mcomments', width: '30%',defaultvalue: '客服: 电话:'}, {label:"相关操作", name: 'Uactions', index: 'Uactions', width: '10%', sortable:false, align:'center',search:false, formatter: function (cellvalue, options, rowObject){ if(rowObject.statue == 0){ return '<button class="am-btn am-btn-success am-btn-xs" onclick="adminauditsub(\'' + rowObject.Id + '\')">接单</button>'+ '<font> 或 </font><button class="am-btn am-btn-danger am-btn-xs" onclick="admindelsub(\'' + rowObject.Id + '\')">废单</button>' }else if(rowObject.statue == 1){ return '<button class="am-btn am-btn-danger am-btn-xs" onclick="admindelsub(\'' + rowObject.Id + '\')">废单</button>' } return '无法修改'; }} ], mtype: 'POST', datatype: 'json', jsonReader: { repeatitems : false, root:"rows" }, sortname: "Id", sortorder: "desc", rowNum: 2, rowList:[1,2,3,50], viewrecords: true, rownumbers: true, pager : '#pager'+tabnum, height: "auto", width: "auto", caption: '等待接单:', emptyrecords: '没有记录!', loadtext: '正在查询服务器数据...' }); //<%--去除 编辑等按钮, 让下分页只有分页和搜索 刷新按钮--%> jQuery("#list"+tabnum).jqGrid('navGrid', '#pager'+tabnum, {edit : false,add : false,del : false}); //<%--动态 刷新 grid的大小--%> var mygrid = $("#list"+tabnum); mygrid.setGridWidth($(window).width()*0.95); mygrid.setGridWidth(document.body.clientWidth*0.95); mygrid.setGridHeight($(window).height()*0.8); mygrid.setGridHeight(document.body.clientHeight*0.8); } ``` ![图片说明](https://img-ask.csdn.net/upload/201509/30/1443597183_900266.jpg) 弄了2天了, console 没有报错, 不知道为啥 jqgrid就是不给 第一个里插入数据
请求大佬支援!!!display:block和display:none在一起的时候不是会覆盖none吗?
## 我的display:block没有覆盖display:none ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557294754_120425.png) ``` <!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> ```
CSS为什么我创造出来的盒子尺寸和实际的盒子尺寸不一样
![图片说明](https://img-ask.csdn.net/upload/201905/07/1557194178_630205.png) ``` <!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; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="ulclass"> <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> </script> </html> ```
大佬们,网页图片不对齐咋办啊?
``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>突出展示</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*清楚页面原有边距*/ margin:0; padding: 0; background-color: black; } .divclass{/*定义盒子*/ width: 1000px; height: 464px; margin: 150px auto;/*盒子居中*/ border: 1px solid red; } .divclass ul {/*去除列表小圆点*/ list-style:none; } .imgclass{/*图片处理*/ width:33%; height:33%; float:left; } </style> </head> <body> <div class="divclass"> <ul> <li><a href="#"><img src="../../../图片/黄昏少女/6.png" class="imgclass" alt="1"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/5.png" class="imgclass" alt="2"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/4.png" class="imgclass" alt="3"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/3.png" class="imgclass" alt="4"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/11.png" class="imgclass" alt="5"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/10.png" class="imgclass" alt="6"></a></li> </ul> </div> </body> <script> $(function (){ $('.divclass').find('li').mouseenter(function (){ $(this).css('opacity',1).siblings('li').css('opacity',0.1); }); $('.divclass').find('li').mouseleave(function (){ $(this).css('opacity',1).siblings('li').css('opacity',1); }); }); </script> </html> ``` **为什么我的图片没有对齐** ![图片说明](https://img-ask.csdn.net/upload/201904/28/1556451688_999719.png)
为什么我外部导入CSS代码样式会错乱,直接写在想要导入的代码却没事?
``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <link rel="stylesheet" type="text/css" href= /> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件,二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show(); // 给一级菜单li设置鼠标离开事件,二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide(); }); </script> </html> _** 插入的CSS代码**_ <!doctype html> <html> <head> <meta charset="utf-8"> <title>美化菜单</title> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:221px; height:21px; border:1px solid red; margin:100px auto; /*盒子居中*/ } ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left;/*标签左浮动*/ text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ width: 72px; } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> </body> </html> ```
为什么我定义的盒子width为400,height为35,显示的却是502,46呢?
![图片说明](https://img-ask.csdn.net/upload/201905/09/1557403126_877996.png) ``` <!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: 35px; margin: 100px auto; border: 1px solid red; } .tab-item{/*标题栏设置*/ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } 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> </html> ```
为什么我的图片换行会出现一个和图片一样大小的空白
``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>突出展示</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*清楚页面原有边距*/ margin:0; padding: 0; } .divclass{/*定义盒子*/ width: 1000px; height: 464px; margin: 150px auto;/*盒子居中*/ border: 1px solid red; } .divclass ul {/*去除列表小圆点*/ list-style:none; } .imgclass{/*图片处理*/ width:33%; height:33%; float:left; } </style> </head> <body> <div class="divclass" > <ul> <li><a href="#"><img src="../../../图片/黄昏少女/6.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/5.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/4.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/3.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/11.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/10.png" class="imgclass"></a></li> </ul> </div> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201904/27/1556374697_73198.png)
相见恨晚的超实用网站
相见恨晚的超实用网站 持续更新中。。。
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
python学习方法总结(内附python全套学习资料)
不要再问我python好不好学了 我之前做过半年少儿编程老师,一个小学四年级的小孩子都能在我的教学下独立完成python游戏,植物大战僵尸简单版,如果要肯花时间,接下来的网络开发也不是问题,人工智能也可以学个调包也没啥问题。。。。。所以python真的是想学就一定能学会的!!!! --------------------华丽的分割线-------------------------------- ...
兼职程序员一般可以从什么平台接私活?
这个问题我进行了系统性的总结,以下将进行言简意赅的说明和渠道提供,希望对各位小猿/小媛们有帮助~ 根据我们的经验,程序员兼职主要分为三种:兼职职位众包、项目整包和自由职业者驻场。 所谓的兼职职位众包,指的是需求方这边有自有工程师配合,只需要某个职位的工程师开发某个模块的项目。比如开发一个 app,后端接口有人开发,但是缺少 iOS 前端开发工程师,那么他们就会发布一个职位招聘前端,来配合公司一...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
JAVA 基础练习题
第一题 1.查看以下代码,并写出结果 public class Test01 { public static void main(String[] args) { int i1 = 5; boolean result = (i1++ &gt; 5) &amp;&amp; (++i1 &gt; 4); System.out.println(result); Sy...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
C++知识点 —— 整合(持续更新中)
本文记录自己在自学C++过程中不同于C的一些知识点,适合于有C语言基础的同学阅读。如果纰漏,欢迎回复指正 目录 第一部分 基础知识 一、HelloWorld与命名空间 二、引用和引用参数 2.1引用的定义 2.2 将引用用作函数参数 2.3 将引用用于类对象 2.4 引用和继承 2.5 何时使用引用参数 2.6 引用和指针的区别 三、内联函数 四、默认参数的...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方,不一定非是天气预报。
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
Python实例大全(基于Python3.7.4)
博客说明: 这是自己写的有关python语言的一篇综合博客。 只作为知识广度和编程技巧学习,不过于追究学习深度,点到即止、会用即可。 主要是基础语句,如三大控制语句(顺序、分支、循环),随机数的生成,数据类型的区分和使用; 也会涉及常用的算法和数据结构,以及面试题相关经验; 主体部分是针对python的数据挖掘和数据分析,主要先攻爬虫方向:正则表达式匹配,常用数据清洗办法,scrapy及其他爬虫框架,数据存储方式及其实现; 最后还会粗略涉及人工智能领域,玩转大数据与云计算、进行相关的预测和分析。
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
机械转行java自学经历,零基础学java,血泪总结的干货
机械转行java自学经历,零基础学java,血泪总结的干货 据说,再恩爱的夫妻,一生中都有100次想离婚的念头和50次想掐死对方的冲动。 求职路上亦是如此,打开这篇文章,相信你也有转行的想法。和身边的朋友聊过,入职后的他们,或多或少对现在的职位都有些不满,都有过转行的冲动。 可他们只是想,而我真的这样做了。 下面就介绍下我转行的血泪史。 我为什么要转行 高中复读了一年,考了个双非院校的机械。当时...
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
【Linux系统编程】Linux信号列表
00. 目录 文章目录00. 目录01. Linux信号编号02. 信号简介03. 特殊信号04. 附录 01. Linux信号编号 在 Linux 下,每个信号的名字都以字符 SIG 开头,每个信号和一个数字编码相对应,在头文件 signum.h 中,这些信号都被定义为正整数。信号名定义路径:/usr/include/i386-linux-gnu/bits/signum.h 要想查看这些信号和...
JavaScript 为什么能活到现在?
作者 | 司徒正美 责编 |郭芮 出品 | CSDN(ID:CSDNnews) JavaScript能发展到现在的程度已经经历不少的坎坷,早产带来的某些缺陷是永久性的,因此浏览器才有禁用JavaScript的选项。甚至在jQuery时代有人问出这样的问题,jQuery与JavaScript哪个快?在Babel.js出来之前,发明一门全新的语言代码代替JavaScript...
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
Python 编程开发 实用经验和技巧
Python是一门很灵活的语言,也有很多实用的方法,有时候实现一个功能可以用多种方法实现,我这里总结了一些常用的方法和技巧,包括小数保留指定位小数、判断变量的数据类型、类方法@classmethod、制表符中文对齐、遍历字典、datetime.timedelta的使用等,会持续更新......
借助AI力量,谷歌解开生命奥秘?
全文共4484字,预计学习时长8分钟 Paweł Czerwiński发布在 Unsplash上的原图 假如疾病不复存在会发生什么?如果我们能像大自然一样迅速获取能量又会发生什么?要是我们能够在极短时间内循环塑料、废油、或其它的一些物质呢?如果人类能够解开生命的奥秘,那么以上这些想象将在未来成为现实。人工智能企业DeepMind的数据科学分析师日前在此领域有了重大发现。以下为具体内容:...
吐血推荐珍藏的Visual Studio Code插件
作为一名Java工程师,由于工作需要,最近一个月一直在写NodeJS,这种经历可以说是一部辛酸史了。好在有神器Visual Studio Code陪伴,让我的这段经历没有更加困难。眼看这段经历要告一段落了,今天就来给大家分享一下我常用的一些VSC的插件。 VSC的插件安装方法很简单,只需要点击左侧最下方的插件栏选项,然后就可以搜索你想要的插件了。 下面我们进入正题 Material Theme ...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
Python 植物大战僵尸代码实现(2):植物卡片选择和种植
这篇文章要介绍的是: - 上方植物卡片栏的实现。 - 点击植物卡片,鼠标切换为植物图片。 - 鼠标移动时,判断当前在哪个方格中,并显示半透明的植物作为提示。
相关热词 c#委托 逆变与协变 c#新建一个项目 c#获取dll文件路径 c#子窗体调用主窗体事件 c# 拷贝目录 c# 调用cef 网页填表c#源代码 c#部署端口监听项目、 c#接口中的属性使用方法 c# 昨天
立即提问