Reputation: 37
all. I have jQuery that slides div's horizontally on click on links. Problem is that on page load no link is clicked so no div is visible (only ul is visible). I would like to div with id "page1" be selected on page load. How to do that? I'm not posting any html, its few div's with id's page1 through page9, and ul with links referenced to div id.
jQuery:
jQuery(function($) {
$('a.panel').click(function() {
var $page = $($(this).attr('href')), $other = $page.siblings('.active');
if (!$page.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({ left: $this.width() }, 500);
});
$page.addClass('active').show().css({ left: -($page.width()) }).animate({ left: 0 }, 500);
}
return false;
});
});
Thanks
Upvotes: 1
Views: 1345
Reputation: 337590
I'd suggest you find the first div in the page and display that. You've not shown your HTML so I can't give you the selector, but something like this should work:
$('.page:first')
.addClass('active')
.show()
.css({ left: -($page.width()) })
.animate({ left: 0 }, 500);
Upvotes: 0
Reputation: 57095
suppose you want to show 1st link in the a.panel
that trigger a div
to show
just use
$(docmuent).ready(function () {
$('a.panel:nth(0)').click();
});
for 1st element use :nth(0)
for second :nth(1)
as index starts from 0
Upvotes: 1