我已经尝试了几个小时了。 JS对我来说并不是那么好。希望比我更聪明的人可以很容易地看到问题在这里。我有一个标签视图，每个视图都应该有一个滑块。滑块在第一个选项卡中工作，但第二个选项卡在它中断。 javascript函数未传递到后续选项卡中。用于查看此内容的URL： http://goo.gl/yZISjS
选项卡式视图和滑块的代码：
<!-- http://codepen.io/wallaceerick/pen/ojtal -->
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Spring Wedding</label>
<div id="tab-content1" class="tab-content ChefsPick">
<div id="slides">
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image1.jpg" alt="">
</div>
<div class="bottom">
<div class="title">Summer Wedding: Hors D'oeuvres</div>
<p>Sweet Maryland Crab Cakes with Herb Remoulade are absolutely scrumptious and the perfect spring wedding hors d'oeuvres.</p>
</div>
</div>
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image2.jpg" alt="">
</div>
<div class="bottom">
<div class="title">Summer Wedding: Hors D'oeuvres</div>
<p>Chinese Chicken Salad in Miniature Tortilla Cups is a bite size signature delight that can be butler passed or displayed on a buffet.</p>
</div>
</div>
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image3.jpg" alt="">
</div>
<div class="bottom">
<div class="bottom">
<div class="title">Summer Wedding: Hors D'oeuvres</div>
<p>Vegetable Spring Rolls add the perfect amount of crunch to your wedding hors d'oeuvre selection.</p>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Summer Wedding</label>
<div id="tab-content2" class="tab-content ChefsPick">
<div id="slides" style="overflow: hidden;">
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image1.jpg" alt="">
</div>
<div class="bottom">
<div class="title">Summer Wedding: Hors D'oeuvres</div>
<p>Sweet Maryland Crab Cakes with Herb Remoulade are absolutely scrumptious and the perfect spring wedding hors d'oeuvres.</p>
</div>
</div>
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image2.jpg" alt="">
</div>
<div class="bottom">
<div class="title">Summer Wedding: Hors D'oeuvres</div>
<p>Chinese Chicken Salad in Miniature Tortilla Cups is a bite size signature delight that can be butler passed or displayed on a buffet.</p>
</div>
</div>
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image3.jpg" alt="">
</div>
<div class="bottom">
<div class="bottom">
<div class="title">Summer Wedding: Hors D'oeuvres</div>
<p>Vegetable Spring Rolls add the perfect amount of crunch to your wedding hors d'oeuvre selection.</p>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3">Fall Wedding</label>
<div id="tab-content3" class="tab-content ChefsPick">
<div id="slides">
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image1.jpg" alt="">
</div>
<div class="bottom">
<div class="title">Spring Wedding: Hors D'oeuvres</div>
<p>Sweet Maryland Crab Cakes with Herb Remoulade are absolutely scrumptious and the perfect spring wedding hors d'oeuvres.</p>
</div>
</div>
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image2.jpg" alt="">
</div>
<div class="bottom">
<div class="title">Spring Wedding: Hors D'oeuvres</div>
<p>Chinese Chicken Salad in Miniature Tortilla Cups is a bite size signature delight that can be butler passed or displayed on a buffet.</p>
</div>
</div>
<div>
<div class="top">
<img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image3.jpg" alt="">
</div>
<div class="bottom">
<div class="bottom">
<div class="title">Spring Wedding: Hors D'oeuvres</div>
<p>Vegetable Spring Rolls add the perfect amount of crunch to your wedding hors d'oeuvre selection.</p>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4">Winter Wedding</label>
<div id="tab-content4" class="tab-content">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5">The Classics</label>
<div id="tab-content5" class="tab-content">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
</div>
</li>
</ul>
我已将所有代码多次移动，似乎无法弄明白。任何帮助将不胜感激。
答案 0 :(得分：0)
您目前正在调用滑块：
$("#slides").slidesjs({
width: 480,
height: 380,
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 3000,
// [number] Time spent on each slide in milliseconds.
auto: false,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
这意味着您在#slides元素上调用滑块。由于此选择器是一个ID，它只会将其应用于它获得的第一个。
因此，考虑到你有多个滑块，你应该使用类。
$(".slides").slidesjs({
width: 480,
height: 380,
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 3000,
// [number] Time spent on each slide in milliseconds.
auto: false,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
然后，删除HTML中的id="slides"，然后添加类slides。
对于记录：您只能为每个文档使用一个特定ID＆gt; https://www.w3.org/TR/html401/struct/global.html#h-7.5.2
编辑：第二期
现在，由于在您的标签上使用display: none;，slideJS无法获得每个幻灯片的实际尺寸：
/* line 328, ../sass/style.scss */
html .wrapper.weddings .tabs .tab-content, body .wrapper.weddings .tabs .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 838px;
font-size: 17px;
line-height: 25px;
padding: 25px 25px 0 25px;
position: absolute;
top: 53px;
min-height: 680px;
border-right: 1px solid #BC9A95;
border-left: 1px solid #BC9A95;
border-bottom: 1px solid #BC9A95;
left: 0;
background: white;
}
因此，您需要找到一种解决方案来屏蔽您的标签而不使用display: none;
您可以尝试以下方式：
html .wrapper.weddings .tabs .tab-content, body .wrapper.weddings .tabs .tab-content {
z-index: 2;
/*display: none; */
overflow: hidden;
width: 838px;
font-size: 17px;
line-height: 25px;
padding: 25px 25px 0 25px;
position: absolute;
top: 53px;
min-height: 680px;
border-right: 1px solid #BC9A95;
border-left: 1px solid #BC9A95;
border-bottom: 1px solid #BC9A95;
left: 0;
background: white;
/* vvvv there vvvv */
opacity: 0;
z-index: -1 /* hacky, but it works */
}
然后，让它出现：
/* line 433, ../sass/style.scss */
html .wrapper.weddings .tabs [id^="tab"]:checked ~ [id^="tab-content"], body .wrapper.weddings .tabs [id^="tab"]:checked ~ [id^="tab-content"] {
opacity: 1;
z-index: 10; /* or whatever default value you set */
}