为什么使用了JQuery之后CSS的效果不实现了，图片全是乱的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='Content-Type' content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="./CSS/style.css">
<title>Document</title>
</head>
<body>
<div class="banner" id="banner"></div>
<div class="banner_two" id="banner_two"></div>
</body>
<script type="text/javascript" src="./JS/JQuery.js"></script>
<script>
$.ajax({
url:'./server/slider.json', //请求地址
type:'post', //请求方式
async:true, //同步异步
dataType:'JSON', //服务端返回数据格式
success:function(imgData){ //请求成功的回调
JQrenderDataToDom(imgData.slider);
}
})
//渲染数据
function JQrenderDataToDom(data){
var str='';
$.each(data,function(index,object){
str+='<a href="'+object.linkUrl +'"><img src="'+object.picUrl+'"></a>';
})
$('#banner_two').html(str);
}
</script>
</html>
正在回答
同学你好，使用同学提供的代码，放到源码中，使用谷歌浏览器测试，css是生效的，没有发生图片错乱的情况。如下：
同学再检查下css文件有没有正常引入。如果还是不可以的话，同学可以下载源码，把自己的代码放到源码中测试。源码如下：
在使用源码测试时，要注意jquery.js和css文件的引入路径，要保证是正确的。
祝学习愉快~
经过测试IE浏览器显示正常但是在发现在chrome浏览器中存在这种情况，且使用JavaScript原生的不存在这种问题，仅仅在JQuery编写的代码中存在CSS渲染不生效的情况控制台的元素效果中没有banner_two的效果检查过css选择器名称没有问题
*{
margin:0;
padding:0;
}
.banner{
width:500px;
height:338px;
overflow:hidden;
position:relative;
margin:50px auto;
}
.banner a{
display:block;
float:left;
width:600px;
height:338px;
}
.banner a img{
display:block;
width:600px;
height:338px;
}
/*banner__jq部分*/
#banner_two{
width:500px;
height:338px;
overflow:hidden;
position:relative;
margin:50px auto;
}
.banner_two a{
display:block;
float:left;
width:600px;
height:338px;
}
.banner_two a img{
display:block;
width:600px;
height:338px;
}
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星