3
\$\begingroup\$

I am trying to add an active class to my subnavigation using the waypoints jQuery. I am trying to avoid writing multiple functions to adhere to the DRY idea. The waypoints toggle the function based on their location in the markup. Any suggestions welcome.

Markup

 <!-- top section -->
<!-- waypoint class-->
<a href="#" class="homeNavItem1"></a>
<!-- partial for the code -->
<?php include 'partials/homepage/topHero.php'; ?>

<!-- content section one events -->
<!-- waypoint2 class-->    
<a href="#" class="homeNavItem2"></a>
<!-- partial for the code -->
<?php include 'partials/homepage/section1.php'; ?>

JavaScript/jQuery

Backwards way:

$('.homeNavItem1').waypoint(function(direction) {
  $('.homeAnchor1').addClass("subActive");
  $('.homeAnchor2').removeClass("subActive");
  $('.homeAnchor3').removeClass("subActive");
  $('.homeAnchor4').removeClass("subActive");
  $('.homeAnchor5').removeClass("subActive");
});

Efficient code attempt:

function waypointItem(x, y, i) {
  $('.homeNavItem' + x).waypoint(function(direction){
    $('.homeAnchor' + y).addClass("subActive");
    $('.homeAnchor' + i).removeClass("subActive");
  });
}

for (i = 2; i <= 6; i ++){
  waypointItem(1, 1, i);
  console.log(i);
}
\$\endgroup\$
  • \$\begingroup\$ Whenever you have incrementing numbers, it probably means you have to use a common class. So you want homeAnchor, no numbers; then figure out how to make it work targeting elements by index. \$\endgroup\$ – elclanrs Dec 4 '14 at 23:49
1
\$\begingroup\$

A common question,

@elclanrs is right that you probably want a common class for your home anchor tags unless you truly want to style them all differently.

Then you could simply turn off the current active anchor with

$('.homeAnchor.subActive').removeClass("subActive");

Otherwise, you could try and see if this works for you:

$('.subActive').removeClass("subActive");

That assumes that on the whole page you use subActive only for your home anchors of course.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.