圖像滑塊導航鏈接跳轉到錨DIV

Question

我正在一個未建的網站上做一些工作，並且遇到了一個問題，其中圖像滑塊的導航鏈接使瀏覽器跳到帶有該ID標簽的DIV。 似乎將導航鏈接像錨定到DIV的鏈接一樣對待，有沒有辦法保持滑塊功能，但使瀏覽器無法跳轉到那些DIV？

這是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>

這是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

您需要阻止click事件的默認操作：

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