Javascript 基于按钮选择的幻灯片内容

我正在尝试设置一个有3个按钮选择的内容区域。根据用户选择的按钮，不同的内容将滑动到位。根据它们位于哪个部分（选择了哪个按钮），按钮将是不同的颜色-白色而不是橙色

这里有一个链接，指向我试图实现的总体想法。 谢谢你的帮助

HTML：删除所有相关的

ID

s:

<div id="hopperContentNav_ctr">
    <ul class="hopperTabs">
        <li><a href="#" class="active tab-1" >RECORD, WATCH, STORE&mdash;<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&mdash;<br />ANYTIME, ANYWHERE!</a></li>
    </ul>
</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);
        });             
    });
});

---

抱歉，没有将隐藏（）和显示（）与幻灯片一起使用。。。我把它留给你。我有一些问题，不习惯使用这个jQuery UI。

问题在哪里？？？我的问题是，为什么它不能正常/顺利地工作？或者有更好的方法来实现这一点吗？这对我来说似乎不太合适。@maddev奇怪，演示工作非常正常。我发现我只需要对内容div进行绝对定位。谢谢你的帮助！

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