jquery - 带有选项卡的 jQuery 滑块为滑块设置动画

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

Based on information provided by you, I think this can help. Although it may not be 100% correct, but it can give you some idea.

$("#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();
      }
   });
})