图像滑块导航链接跳转到锚DIV

Question

I'm doing some work on a site I didn't build, and I'm running into an issue where the nav links for an image slider are making the browser jump to the DIV with that ID tag. It seems to be treating the nav links like anchor links to the DIVs, is there a way to keep the slider functionality, but disable the browser from jumping to those DIVs?

Here's the HTML:

<div class='slide-selectors'>
    <div class="homepage-featured"><a href='#image1' id="slide-selector-1" class="tab">Link 1</a></div>|
    <div class="homepage-featured"><a href='#image2' id="slide-selector-2" class="tab">Link 2</a></div>|
    <div class="homepage-featured"><a href='#image3' id="slide-selector-3" class="tab">Link 3</a></div>|
    <div class="homepage-featured"><a href='#image4' id="slide-selector-4" class="tab">Link 4</a></div>|
    <div class="homepage-featured"><a href='#image5' id="slide-selector-5" class="tab">Link 5</a></div>
</div> 

<div id="homepage-slides">

    <div id="image1" class="sliderContainer"> 
        <img src="/img/img-01.jpg" width="1160" height="200"/>
    </div>

    <div id="image2" class="sliderContainer">
        <img src="/img/img-02.jpg" width="1160" height="200"/>
    </div>

    <div id="image3" class="sliderContainer">
        <img src="/img/img-03.jpg" width="1160" height="200"/>
    </div>

    <div id="image4" class="sliderContainer">
        <img src="/img/img-04.jpg" width="1160" height="200"/>
    </div>

    <div id="image5" class="sliderContainer">
        <img src="/img/img-05.jpg" width="1160" height="200"/>
    </div>

</div>

And here's the JavaScript:

var $ = jQuery.noConflict();
var initialize;
function AnimateSlide(newSlide){
 var clickedSlide = typeof newSlide !== 'undefined' ? newSlide : "auto";
 // console.log("passed DOM id or auto ",clickedSlide);
  var currentSlideId, currentSlideDOM, nextSlideId;
  var nextSlideDOM = newSlide;


  var slideCount =  0;
   /* current slide check */
  $('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
    slideCount++;
     if( $(this).hasClass('active') ) { 
       currentSlideDOM = $(this).attr('href');            
       $(this).removeClass('active');
       currentSlideId = slideCount;
       //console.log("active found: DOM", currentSlideDOM,"id", currentSlideId);
        }
        $(currentSlideDOM).hide();
  });
  /* end of current slide check */

 //  console.log("after loop: current active slide DOM",currentSlideDOM,"id", currentSlideId,"count", slideCount);

  /* start of automation check */
   if(clickedSlide != "auto" ) {
     nextSlideDom = clickedSlide;
     nextSlideId = parseInt(clickedSlide.replace("#image", ""));
    // console.log('slide set to', nextSlideDOM, nextSlideId);
   }
   else {
     if (currentSlideId == slideCount) {
       nextSlideId = 1;
     }
     else {
       nextSlideId = currentSlideId + 1;
     }
     $('#image' + currentSlideId).hide();
     nextSlideDOM = "#image" + nextSlideId.toString();
     // console.log("automated slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId,"last slide id", currentSlideId);
   } 
   /* end of automation check */
   var nextSelectorId = "#slide-selector-" + (nextSlideId);
   $(nextSlideDOM).show();  /* add active class to next slide */
   $(nextSelectorId).addClass('active'); //.html(nextSelectorHTML);

};


function initializeSlides() {
 var slideCount = 0;

  $('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
     slideCount++;
  });

  $('#homepage-slides').children('div').each(function() {
    $(this).hide();
  });

    nextSlideId = Math.floor(Math.random()*(slideCount)) + 1;
    nextSlideDOM = "#image" + nextSlideId.toString();

    //console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId);

    var nextSelectorId = "#slide-selector-" + (nextSlideId);
    $(nextSlideDOM).show();
    $(nextSelectorId).addClass('active');

    //console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId, nextSelectorId);
    initialize = false; 

};

jQuery(document).ready(function($){

/******************** HOMEPAGE BANNER *************************
-show and hide the different featured items in the homepage banner section  
-same function utilized for hiding and showing content in product tabs          
*/
initialize = true;

initializeSlides();

setInterval(function() {
  AnimateSlide(); 
},rSpeed);

$('.tab').click(function (e) {
  var clickedSelector = $(this).attr('href'); 
  AnimateSlide(clickedSelector);
});
});

Answer 1

You need to prevent the default action for the click event:

$('.tab').click(function (e) {
  e.preventDefault();
  var clickedSelector = $(this).attr('href'); 
  AnimateSlide(clickedSelector);
});