How can I reference the 'active' item in an instance of jQuery serialScroll?
I'm coding a feature for a photographer that is very similar to a slideshow. I've 开发者_如何学Pythondecided to use the jQuery serialScroll plugin (which piggybacks on the scrollTo plugin) to achieve this affect. I based my code off of the slideshow on the serialScroll demo page, which is almost exactly the functionality that I was looking for.
I've got the code working successfully, but I'd like to achieve one more effect. If possible, I'd love for the items in my slideshow (in my case, <li>
elements), to be semitransparent by default, with only the current (or "active," or "selected") item showing at 100% opacity.
I can control the transparency with CSS easily, but I am struggling to track the last item that serialScroll has animated to. How can I interact with the currently "active" item via jQuery so that I can give it a class or perform other actions?
you can do this is different ways,you can add an attribute to your <li>
tags, or you can use class like this:
<ul>
<li class="active">test1</li>
<li>test2</li>
<li>test3</li>
</ul>
and with this code in jQuery you can change the active element.
$('ul li').click( function () {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});
and with this one you can grab the active one
$('ul li.active').html()
精彩评论