[英]Setting background image as name attribute on click jquery not working
我将每个页面的英雄背景图像设置为单击的按钮的名称,包括字符串中的 URL 和扩展名。 在警告窗口中,显示正确的背景图像但未设置背景图像。 怎么了? 我以同样的方式设置目标,也许这就是发生冲突的地方,所以我也包含了这段代码。
var pageTrigger = $(".tab-button-pages");
var mainSections = $(".section");
var tabletBackground = $(".tablet-content-background");
pageTrigger.on('click', function(){
var $this = $(this),
target = $this.data('target');
name = $this.attr('name');
$(".tablet-content-background").css('background-image','url(./img/'+name+'.png)');
pageContainer.load(target);
return false;
});
<div class="tab-button-pages" name="meridian" data-target="meridian.html">
See More
</div>
var pageTrigger = $(".tab-button-pages"); var mainSections = $(".section"); var tabletBackground = $(".tablet-content-background"); var pageContainer = $(".tablet-content-background"); pageTrigger.on('click', function(){ var $this = $(this), target = $this.data('target'); name = $this.attr('name'); pageContainer.attr('style','background-image:url('+name+'); min-height: 300px;'); pageContainer.html(target); return false; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab-button-pages" name="https://via.placeholder.com/150" data-target="Background 1"> See More </div> <br><br> <div class="tab-button-pages" name="https://via.placeholder.com/320" data-target="Background 2"> See More </div> <br><br> <div class="tablet-content-background"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.