我正在尝试设置一个有 3 个按钮选择的内容区域。根据用户选择的按钮,不同的内容将滑入到位。根据它们所在的部分(选择了哪个按钮),按钮将具有不同的颜色 - 白色而不是橙色。
这里是我想要实现的总体思路的链接。 感谢您的帮助。
最佳答案
jsBin demo
HTML:删除了所有相关的 ID
:
<div id="hopperContentNav_ctr">
<ul class="hopperTabs">
<li><a href="#" class="active tab-1" >RECORD, WATCH, STORE—<br />IN ANY ROOM!</a></li>
<li><a href="#" class="tab-2" >COMMERCIAL-FREE TV<br />IN PRIMETIME!</a></li>
<li><a href="#" class="tab-3" >MOVIE MADNESS—<br />ANYTIME, ANYWHERE!</a></li>
</ul>
</div>
相反,我添加了 ID 类page
:
<div class="page">
<p class="wholeHomeHead">Whole-Home-DVR</p>
........
</div>
jQuery:
$(document).ready(function() {
$('.page:gt(0)').hide(); // hide all pages but first one using :gt() selector
$('.hopperTabs li').click(function(e){
e.preventDefault();
var thisInd = $(this).index();
$('.page').stop().fadeTo(300,0,function(){
$(this).hide();
$('.page').eq(thisInd).stop().fadeTo(600,1);
});
});
});
很抱歉没有在幻灯片中使用 hide() 和 show()...我将其留给您。我遇到了一些问题,不习惯使用这个 jQuery UI。
关于javascript - 基于按钮选择的幻灯片内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12466075/