jQuery中的.load()和奇怪的行为

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抓住#FEATdiv等等.ACCESSORIES根本不会加载#ACCESSORYdiv,我不知道为什么.脚本初始化并显示页面加载器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..它加载那么好.

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

Answer 1

这个问题可能与 CSS 有关。我刚刚查看了几个产品，只要内容包含列表，由于空白过多，显示内容就会显示为空白。

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

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