1

我的本意

当我hover超过一个li时，#featuredThumbs li我想交换div下#productText

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

这是我的 jsFiddle 文件

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

5 回答 5

1

试试这个

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

演示

于 2012-09-26T20:23:36.703 回答
1

你可以这样做：

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

演示

更新：自动切换

演示

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(); 
}
于 2012-09-26T20:25:56.673 回答
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/

于 2012-09-26T20:26:56.620 回答
1

这是你要找的吗？

$(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

于 2012-09-26T20:28:19.820 回答
-1

你的意思是这样的吗？

document.getElementById('featuredThumbs').onmouseover = function() {
  document.getElementById('productText').innerHTML = 'swap';
}
于 2012-09-26T20:16:14.913 回答