Question

我的意图

当我hover超过li #featuredThumbs li时，我想换div下的#productText

我怎样才能做到这一点？我想为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>

Answer 1

试试这个

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

DEMO

Answer 2

你可以这样做：

// 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();    
});

DEMO

更新：自动切换

DEMO

var nextLi;
var autoSwitch = setInterval(function(){
    var firstLi = $("#featuredThumbs li:first");

    if(nextLi == undefined){
        nextLi = firstLi;
    }else{
        nextLi = nextLi.next("li");
        nextLi = (nextLi.length == 0) ? firstLi : nextLi;
    }  
    switchToDivForLi(nextLi);    
}, 3000);

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

$("#featuredThumbs li").hover( function() {
    switchToDivForLi($(this));

    if(autoSwitch != undefined){
        clearInterval(autoSwitch);  
    }        
});

function switchToDivForLi(liElement){
    $(".active").removeClass("active");
        liElement.addClass("active");

        var liId = liElement.attr('id');
        $("#" + liId.replace("Prod", "Text"))
            .addClass("active")
            .show()
            .siblings()
            .removeClass("active")
            .hide(); 
}

Answer 3

我想，这可能会对你有所帮助：

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/

Answer 4

这是你要找的吗？

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

不要忘记更改产品div的标题，以便区分它们（现在他们都说“汽车保险”）。我还把这个添加到了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

来更改周期的速度

Answer 5

你的意思是这样吗？

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

当我悬停李时，如何更改div

5 个答案: