Question

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

这是我想要完成的一般想法的链接。感谢您的帮助。

Answer 1

jsBin demo

HTML：删除了所有相关的ID：

<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>

而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。

根据按钮选择滑动内容

1 个答案:

jsBin demo