[英]How to change the div when i hover a li
My intention 我的意图
When i hover
over a li
on #featuredThumbs li
I want to swap the div
under #productText
当我hover
在li
上#featuredThumbs li
我希望交换的div
下#productText
How can I accomplish this? 我怎么能做到这一点? I want to add a active state to both the li
and div
. 我想为li
和div
添加一个活动状态。 I also want it to automatically start when the page loads. 我还希望它在页面加载时自动启动。
Here is my jsFiddle File 这是我的jsFiddle文件
JS JS
$("#featuredThumbs li").hover( function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
HTML 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>
You can do it like this: 你可以这样做:
// 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();
});
UPDATE: with auto switching 更新:自动切换
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();
}
I think, this may help you: 我想,这可能会对你有所帮助:
CSS: CSS:
.products { display:none; }
.products.active { display:block; }
JS: JS:
$("#featuredThumbs li").hover( function() {
$(".active").removeClass("active");
var textid = this.id.replace("Prod", "Text");
$(this).addClass("active");
$("#" + textid).addClass("active");
});
This works as long as the id of the li elements ends in 'Prod' and the matching text ends in 'Text'. 只要li元素的id以'Prod'结尾并且匹配的文本以'Text'结尾,这就有效。 I also added the class active
to the first div. 我还将类active
添加到第一个div。
Is this what you're looking for? 这是你在找什么?
$(function() {
$("#featuredThumbs li").hover( function() {
$(".active").removeClass("active");
$(this).addClass("active");
$('.products').hide();
$('#' + this.id.replace('Prod','Text')).show()
});
});
Don't forget to change the titles for the product divs so you can tell them apart (right now they all say "Auto Insurance"). 不要忘记更改产品div的标题,以便区分它们(现在他们都说“汽车保险”)。 I also added this to the css: 我还把这个添加到了css:
.products { display: none; }
To make it cycle automatically, this is the full code: 要使其自动循环,这是完整的代码:
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);
});
And the extra line of CSS changes to: 额外的CSS更改为:
.products:not(:first-child) { display: none; }
It will not cycle when the user hovers over one item because the onmouseover event stops the interval and the onmouseout restarts it. 当用户将鼠标悬停在一个项目上时它不会循环,因为onmouseover事件会停止间隔并且onmouseout会重新启动它。 You can change the speed of the cycle by changing intervalLen
您可以通过更改intervalLen
来更改周期的速度
Do you mean something like this? 你的意思是这样的吗?
document.getElementById('featuredThumbs').onmouseover = function() {
document.getElementById('productText').innerHTML = 'swap';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.