Add class to Pager <li> tag

Topics: Writing themes
Jul 13, 2013 at 12:31 AM
Is it possible to add an "active" class to <li> tag for the current page? I'm assuming if it's possible, it would need to be in the Pager.CurrentPage shape, but I'd like the class on the parent <li> object not in a <span> surrounding the value. Is it possible to do reference the parent object and add a class?

Thanks for the help =)
Jul 13, 2013 at 1:29 AM
btw...the reason I want to add it to the <li> tag if I can, is that this theme has a selectable "swatch" property that changes the stylesheet based on the "swatch" selection. I didn't write the CSS for the swatches, so I'd have to modify all of them if the "active" class is placed on a different element.
Jul 13, 2013 at 1:40 AM
I don't why I didn't think about it, but I just did it with JavaScript in the Pager.CurrentPage shape
<a id="CurrentPage" href="#">@Model.Value</a>
<script type="text/javascript">
    $('#CurrentPage').parents('li').addClass('active');
</script>
seems to work fine. I guess I was thinking I was coding in a place I couldn't use client side.
Developer
Jul 13, 2013 at 10:51 AM
It's not a crazy thought to do this from server side code, but you would have to override the entire shape (Pager_Links) including all of its logic that you need for your pager. At some point Pager_Links morphs into a List shape, but overriding that is less than ideal without any alternates to make it specific to your pager.