提示小红点样式

最新推荐文章于 2023-09-28 10:45:58 发布

飞火龙在天

最新推荐文章于 2023-09-28 10:45:58 发布

阅读量8k

点赞数

本文链接：https://blog.csdn.net/qq_23145857/article/details/53332762

版权

本文展示了如何使用JavaScript、jQuery和JSP来动态显示或隐藏页面上的小红点提示，根据后台返回的数据更新不同模块的未读消息计数。通过AJAX请求获取数据，并使用CSS控制小红点的显示状态。

摘要由CSDN通过智能技术生成

小红点样式：

.con_bot a .span_position{

position:absolute;
border-radius:50%;
background-color:#ff2122;
color:#fff;
font-size:0.3rem;
width:0.4rem;
height:0.4rem;
line-height:0.4rem;
top:-0.1rem;
right:-0.3rem;
z-index:1;

}

js:

$(function(){
$("#mywork").css("display","none");
$("#cmporder").css("display","none");
$("#homeorder").css("display","none");
$("#serviceorder").css("display","none");
$.ajax({
url :context + 'orderconts',
type : 'post',
dataType : 'json',
async:true,
data:{},
success : function(result) {
if(result.success){
$("#mywork").css("display","block");
$("#cmporder").css("display","block");
$("#homeorder").css("display","block");
$("#serviceorder").css("display","block");
var mycomplainCont=result.obj.mycomplainCont;
var cmpOrderwordCont=result.obj.cmpOrderwordCont;
var homeOrderwordCont=result.obj.homeOrderwordCont;
var serviceOrderCont=result.obj.serviceOrderCont;
if(mycomplainCont<=0){
$("#mywork").css("display","none");
}
if(cmpOrderwordCont<=0){
$("#cmporder").css("display","none");
}
if(homeOrderwordCont<=0){
$("#homeorder").css("display","none");
}
if(serviceOrderCont<=0){
$("#serviceorder").css("display","none");
}
$("#mywork").html(mycomplainCont);
$("#cmporder").html(cmpOrderwordCont);
$("#homeorder").html(homeOrderwordCont);
$("#serviceorder").html(serviceOrderCont);

} else {
$("#mywork").css("display","none");
$("#cmporder").css("display","none");
$("#homeorder").css("display","none");
$("#serviceorder").css("display","none");
}
}
});