Javascript 当我将鼠标悬停在li上时如何更改div

我的意图

当我将

鼠标悬停在
上的
li
上时，我想交换
下的
div

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


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>
​


乱数假文！
汽车保险
我们的共同目标是成为一名杰出的领导者，我们必须为自己的事业做出巨大的贡献。但是，在最低限度的利益范围内，所有人都必须履行自己的义务

汽车保险
我们的共同目标是成为一名杰出的领导者，我们必须为自己的事业做出巨大的贡献。但是，在最低限度的利益范围内，所有人都必须履行自己的义务

汽车保险
我们的共同目标是成为一名杰出的领导者，我们必须为自己的事业做出巨大的贡献。但是，在最低限度的利益范围内，所有人都必须履行自己的义务

汽车保险
我们的共同目标是成为一名杰出的领导者，我们必须为自己的事业做出巨大的贡献。但是，在最低限度的利益范围内，所有人都必须履行自己的义务







​
你的意思是这样的吗

document.getElementById('featuredThumbs').onmouseover = function() {
  document.getElementById('productText').innerHTML = 'swap';
}

试试这个

     $("#featuredThumbs li").hover( 
     function(){
           $(this).addClass("active");
           $(this).append($('#'+$(this).attr('id').replace('Prod','Text')).html());
         },
     function(){
           $(".active").removeClass("active");
           $(this).html("");
        }
     );​

您可以这样做：

// activate first item
$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active");

// set hover handler
$("#featuredThumbs li").hover( function() {
    $(".active").removeClass("active");
    $(this).addClass("active");

    // find div id based on li id
    var liId = $(this).attr('id');
    var liIdParts =  liId.split("-");
    var divId = liIdParts[0] + "Text";

    $("#" + divId)
        .addClass("active")
        .show()
        .siblings()
        .removeClass("active")
        .hide();    
});​


更新：具有自动切换功能


我想，这可能会帮助你：

CSS:

JS:

只要li元素的id以“Prod”结尾，而匹配的文本以“text”结尾，这种方法就可以工作。我还将类
active
添加到第一个div

这就是你要找的吗

$(function() {
    $("#featuredThumbs li").hover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show()
    });
});​​

别忘了更改产品部门的标题，这样你就可以区分它们了（现在他们都说“汽车保险”）。我还将此添加到css中：

.products { display: none; }


要使其自动循环，以下是完整代码：

var intervalLen = 1000; //milliseconds 
$(function() {
    $("#featuredThumbs li").mouseover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show();

          clearInterval(interval);
    });

    $("#featuredThumbs li").mouseout(function() {
        interval = setInterval(showNext,intervalLen);
    });
});

function showNext() {
    var visible = $('div', $('#productText')).not(':hidden');
    var next = visible.next('.products'); 
    if(next.length == 0) {
        next = $('div:first-child', $('#productText'));
    }
    visible.hide();
    next.show();
}

var interval;
​$(function() {
    interval = setInterval(showNext,intervalLen);
});

另外一行CSS更改为：

.products:not(:first-child) { display: none; }

当用户将鼠标悬停在一个项目上时，它不会循环，因为onmouseover事件会停止间隔，onmouseout会重新启动间隔。你可以通过改变
intervalLen
来改变循环的速度
li
应该有图像，但我无法上传它们，所以我给它们添加了背景色@AntonBaksheiev。我所说的交换是指将div切换到下一个@adrian。我不是要求@Alexander只是需要帮助。对不起/哎呀，不知怎么的，我没有看到你的代码。我是StackOverflow新手。这会在
li
中添加文本，这不是我想要它做的。但是谢谢。向上投票支持尝试/帮助。这肯定会成功！我怎样才能让它自动启动？比如：
$（document）.ready（函数（）{/*悬停代码在这里*/}）
我的意思是，当dom加载时，以及当我将鼠标悬停在
li
上时，会自动切换到下一个
div
“下一个”div是什么？对不起，我不明白你的问题。这可能就是我在这里所做的，我在页面加载时手动添加了“活动”样式。我还为
li
定义了一个“活动”样式，因此它看起来与
#featuredThumbs li:hover
样式相同。这有太多的变量，我正在寻找一些较小且最小的向上投票的帮助！我怎样才能让它在页面加载和悬停时启动？我想它就是这样做的。查看演示。如果不是，你需要更好地解释你想要发生什么。我感谢你的帮助。我希望它自动循环，并且当您手动将
鼠标悬停在
li
s上时。我希望这样做，您可以将悬停处理程序的功能移动到一个单独的函数，该函数将li元素作为参数。然后在悬停时提供$（this）作为参数。接下来创建一个区间函数，该函数以第一个li元素作为参数触发函数。跟踪当前li并在interval函数中逐个循环。是的，但我还需要它在dom加载后自动启动，而不仅仅是悬停
.products { display: none; }

var intervalLen = 1000; //milliseconds 
$(function() {
    $("#featuredThumbs li").mouseover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show();

          clearInterval(interval);
    });

    $("#featuredThumbs li").mouseout(function() {
        interval = setInterval(showNext,intervalLen);
    });
});

function showNext() {
    var visible = $('div', $('#productText')).not(':hidden');
    var next = visible.next('.products'); 
    if(next.length == 0) {
        next = $('div:first-child', $('#productText'));
    }
    visible.hide();
    next.show();
}

var interval;
​$(function() {
    interval = setInterval(showNext,intervalLen);
});

.products:not(:first-child) { display: none; }