jquery - 防止加载隐藏 div 的内容

Question

这是我的html：

<ul id="navigationMenu">
<li>
    <a class="home" href="#">
        <span> i need to prevent loading this content</span>
    </a>
</li>

<li>
    <a class="about" href="#">
        <span><img src="http://webdesigntunes.com/wp-content/uploads/2013/05/Minimalistic-Navigation-Menu.jpg" /> </span>
    </a>
</li>

<li>
     <a class="services" href="#">
        <span>Services</span>
     </a>
</li>

<li>
    <a class="portfolio" href="#">
        <span>Portfolio</span>
    </a>
</li>

<li>
    <a class="contact" href="#">
        <span>Contact us</span>
    </a>
</li>

对不起，我不能放 css ！

但我用溢出隐藏li：隐藏，当悬停溢出时：可见

我需要阻止浏览器加载隐藏的 li 内容，直到访问者通过将鼠标悬停在另一个 div 上显示“li”

Answer 1

1. 为 li 元素分配一个 ID。
2. 在您的 CSS 中，将“display:none”分配给此 ID。
3. 在另一个 div 上，为 showElement 添加一个 onHover 触发器。

4. 添加以下javascript：

   function showElement() { document.getElementById("li element id").style.display="block"; }

Answer 2

<li id="list">
  <a class="about" href="#">
    <span><img src="http://webdesigntunes.com/wp-content/uploads/2013/05/Sweet-Tabbed.jpg"   /> </span>
  </a>
</li>


$(document).ready(function()
{
   $('#list').hide();

   $('#yourdiv').hover(function()
   {
     $('#list').show();
   },

  function()
  {
    //in case you want to hide it again on mouseout else leave this function empty
    $('#list').hide();  
  }
  );

});