Question

您好我正在尝试添加一些标签，以便为jQuery滑块添加更多可用性。我设法根据HTML中有多少张幻灯片添加一些标签。现在，如果我点击这些标签中的一个（1,2,3,4），它将不得不带我到相关的幻灯片，如何实现这一目标的任何想法？

这是我到目前为止所做的：

 var slides = $('.slide');
 var numberOfSlides = slides.length;

function createTabs() {  // creates tabs based on how many slides in HTML
for (i = 1; i < numberOfSlides + 1; i++) {
    $('#tabsstyle').append('<p>' + i + '</p>')
}
}
createTabs();
$("#tabsstyle p").click(function () {
// here the code to jump on the related slide
})

如果您需要更多信息，请与我们联系。感谢

添加了HTML

<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideshow">

<div id="slidesContainer">

  <div id="one" class="slide">
    <h2></h2>
    </div>

  <div id="two" class="slide">
    <h2></h2>
     </div>

  <div id="three" class="slide">
    <h2></h2>
   </div>

  <div id="four" class="slide">
    <h2></h2>
  </div>


</div>
<div id="tabsstyle"></div>

Answer 1

根据您提供的信息，我认为这可以提供帮助。虽然它可能不是100％正确，但它可以给你一些想法。

$("#tabsstyle p").click(function () {
   var index = $(this).index();
   $('#slidesContainer').find('.slide').hide();
   $('#tabsstyle').find('p').each(function(pos){
      var slideToShow = parseInt(pos) + 1;
      if(pos == index){
          $('#slidesContainer').find('.slide:nth-child('+slideToShow+')').show();
      }
   });
})

带有选项卡的jQuery滑块，用于为滑块设置动画

1 个答案: