javascript - 当我悬停在 li 上时如何更改 div

Question

我的意图

当我将鼠标悬停到#featuredThumbs li上的li时，我想交换下的div >#productText

我怎样才能做到这一点？我想为 li 和 div 添加事件状态。我还希望它在页面加载时自动启动。

Here is my jsFiddle File

JS

 $("#featuredThumbs li").hover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
});​

HTML

<div id="container">
  <h2>Lorem ipsum!</h2>
  <div id="featuredProducts">
    <div id="productText">
      <div id="autoText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="homeText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="commercialText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="lifeText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->

    </div>
    <!-- eo: productText -->
    <ul id="featuredThumbs">
      <li id="autoProd"></li>
      <li id="homeProd"></li>
      <li id="commercialProd"></li>
      <li id="lifeProd"></li>
    </ul>
  </div>
  <!-- eo : featuredProducts -->

</div>
​

Answer 1

我想，这可能对你有帮助:

CSS:

.products { display:none; }
.products.active { display:block; }

JS:

$("#featuredThumbs li").hover( function() {
    $(".active").removeClass("active");
    var textid = this.id.replace("Prod", "Text");
    $(this).addClass("active");
    $("#" + textid).addClass("active");
});​

只要 li 元素的 id 以“Prod”结尾并且匹配的文本以“Text”结尾，这就有效。我还将 active 类添加到第一个 div。

http://jsfiddle.net/KfEuL/