Событие Click перенаправляет меня в начало сайта (фрагмент кода внутри) - PullRequest
Новая
       15

Событие Click перенаправляет меня в начало сайта (фрагмент кода внутри)

1 голос
/ 13 мая 2019

Я пытаюсь построить карусель из 3 изображений, но я не знаю, почему, когда я нажимаю кнопку «Далее», она идет вверху веб-сайта вместо того, чтобы менять изображение.Я опубликую здесь фрагмент кода, может быть, мне не хватает чего-то маленького, но я смотрю на код в течение 2 часов.

Код с «точками», который я больше не использую, пожалуйста, игнорируйте его.

var slideIndex = 1;
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

showSlides(slideIndex);
next.addEventListener('click', plusSlides(1))
next.addEventListener('click', plusSlides(-1))
// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("product");
    //   var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    //   for (i = 0; i < dots.length; i++) {
    //       dots[i].className = dots[i].className.replace(" active", "");
    //   }
    slides[slideIndex - 1].style.display = "block";
    //   dots[slideIndex-1].className += " active";
}
#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: .95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
  height: 1000px;
  margin: auto;
  position: relative;
  background: grey;
}

#section-one .slideshow-container .product {
  display: none;
}

#section-one .slideshow-container .product .img {
  background: url("https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg") no-repeat center center/cover;
  height: 1000px;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
  <!-- Section-one -->
    <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div class="slideshow-container">
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
      </div>
    </section>

Ответы [ 3 ]

1 голос
/ 13 мая 2019

Замените на WIEW MORE ===> WIEW MORE или удалите href в теге a, javascript: void (0) - это действие JavaScript, но это не событие, вы можете добавить идентификатор или класс и затем выполнить желаемое действие.

1 голос
/ 13 мая 2019

Помимо уже предоставленных ответов, вы также можете предотвратить это, полностью удалив атрибут href из вашей ссылки. Другой способ - добавить функцию обратного вызова к слушателю событий и использовать event.preventDefault();.

Примерно так: next.addEventListener('click', (event) => { event.preventDefault(); plusSlides(1); });

1 голос
/ 13 мая 2019

Вам необходимо заменить href = "#" на href = "javascript: void (0);" как «#» используется с href для разрешения прокрутки, если вы «#id», вы будете перенаправлены на элемент id = «id», а когда вы не предоставите идентификатор, он перейдет в верхнюю часть веб-страницы.

...