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

Question

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

我正在加载的内容是多个 div，它们都包裹在一个外部 <div> 中已从 View 中隐藏。

我有 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()我不知道。

Answer 1

这个问题可能与 CSS 相关。我刚刚查看了几个产品，无论内容是否包含列表，由于过多的空白，显示都是空白的。

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

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