Question

我正在网站上实现一个简单的jQuery脚本，该网站将网页的一个部分的内容加载到同一网页上的“展示容器”中。

我正在加载的内容是多个div，它们全部包含在已被隐藏的外部<div>中。

我有display container div以及用户可以点击的几个链接。每次单击链接时，相应的匹配内容都会加载到显示容器中。

我的jQuery。

$(".Prod-Link-2").click(function(e){

e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');

$("#ITARGET").load($(this).attr('href'));

});

菜单HTML

<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>

目标div

<div class="Info-Target" id="ITARGET">

</div>

所以我的问题是这一切都有效，除了其中一个链接。

我的隐藏div有4个内容div和2个表，其中都有自己的ID。 SPECIFICATIONS抓取#specTable，APPLICATIONS抓住#FEAT div等等。ACCESSORIES根本不会加载#ACCESSORY div而且我不会不知道为什么。脚本初始化并显示页面加载器gif，但是然后显示我正在尝试加载的内容而不显示任何内容。

隐藏区域格式

<div style="display: none;">

<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>

etc ....

</div>

出于测试目的

<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>

无论我在ID标签和链接href attr中更改名称，它都不会加载（我甚至尝试使用不同的名称创建一个新的div并将div移到隐藏的顶部内容区域认为它可能是一个加载问题），但是如果我将链接href attr更改为其中一个表或不同的div，例如#FEAT或#specTable ..它会加载那么好

我的直觉是，jQuery和.load()有一些我不知道的qwirk。

Answer 1

这个问题可能与CSS有关。我刚刚看了几个产品，无论内容包括哪个列表，由于空白区域过多，显示屏显示为空白。

这条CSS规则似乎是罪魁祸首：

.Features li:before  { content: url(#)!important; }

jQuery中的.load（）和奇怪的行为

1 个答案: