$(document).ready(function () {
$('#carousel a, #footer a').click(selectNav); // When any a-tag within divs with id="carousel" or id="footer" are clicked...
// I want to indicate which pannel was slected in the carousel div by adding a css class to the coresponding a element within it.
function selectNav() {
$(this) // I may try stripping the url after the # and then use that...
.parents('div:first') // I think I need to make sure this is pointing to the carousel div
// even when triggered by a link not within the carousel div(such as one from within the footer div for example)!
.find('a') // I think this is then finding all "a"s within that div
.removeClass('selected') // then removes the css class "selected" from all a-tags
.end() //
.end() //
.addClass('selected'); // and then adding the css class "selected" to the clicked on a-tag.
// or to the a tag id "#something" that was stripped from the url that corresponds...
// So I need to instead of the above ".parents('div:first')"
// replace that with something like "set the starting point to the fixed point of the div with id="carousel""
// strip the class "selected" from all a tags within that div, and add back the class to the one I want...
}
});
If this helps my document structure lools like:
// body
// div carousel (a-tags in here)
// div controls2
// ===== div scrollpanel
// ______________ div scrollcontainer
// ###################### children divs below scrllcontainer
// ===== div footer (looks to me like its a sibling maybe of scrollpanel, and a child of controls2, which is a sibling of carousel)
Its not very important as I already have an indicator, but the code looks useful to me if I'm missing something very simple that can be added to get things to work... // can anyone help...