jQuery - if no element is being called?
i have a script where if you hover over a certin element, a unique DIV is displayed, and the others hide...very simple...
on page load, i call a div as the "intro" shown div....
what i want to accomplish, is if the other 5 elements are not being hovered over, it is displaying the intro div...
so, essentially in layman's terms:
show intro div if mouseover this div class, show this div ID, if not show intro div.
here is what i am using so far:
$(document).ready(function() {
$('.intro').show();
$('li.members, li.members-active').hover(function() {
$('.members-show').show();
$('.brokers-show').hide();
$('.providers-show').hide();
$('.employers-show').hide();
$('.seniors-show').hide();
$('.all').hide();
return false;
});
$('li.brokers, li.brokers-active').hover(function() {
$('.brokers-show').show();
$('.members-show').hide();
$('.providers-show').hide();
$('.employers-show').hide();
$('.seniors-show').hide();
$('.all').hide();
return false;
});
$('li.providers, li.providers-active').hover(function() {
$('.providers开发者_JAVA技巧-show').show();
$('.brokers-show').hide();
$('.members-show').hide();
$('.employers-show').hide();
$('.seniors-show').hide();
$('.all').hide();
return false;
});
$('li.employers, li.employers-active').hover(function() {
$('.employers-show').show();
$('.brokers-show').hide();
$('.providers-show').hide();
$('.members-show').hide();
$('.seniors-show').hide();
$('.all').hide();
return false;
});
$('li.seniors, li.seniors-active').hover(function() {
$('.seniors-show').show();
$('.brokers-show').hide();
$('.providers-show').hide();
$('.employers-show').hide();
$('.members-show').hide();
$('.all').hide();
return false;
});
});
You can simplify this significantly:
$(document).ready(function() {
$('.intro').show(); // Show the intro by default
// Ideally, you'd skip this step and just make sure
// the intro was visible on load anyway
$('li').hover(function() { // Bind an event handler to every item you want to toggle
var associatedDivClass = $(this).attr('class').replace('-active', '-show');
$('.' + associatedDivClass).show();
$('.intro').hide();
});
$('li').mouseout(function() {
var associatedDivClass = $(this).attr('class').replace('-active', '-show');
$('.' + associatedDivClass ).hide();
$('.intro').show();
});
});
Restrict the 'li' selector as needed so you just target the items you want to toggle.
精彩评论