1

ボタンの選択肢が3つあるコンテンツ領域を設定しようとしています。ユーザーが選択したボタンに基づいて、さまざまなコンテンツが所定の位置にスライドします。それらが下にあるセクション（どのボタンが選択されたか）に応じて、ボタンは異なる色になります-オレンジではなく白です。

これが私が達成しようとしていることの一般的な考え方へのリンクです。あなたの助けに感謝します。

http://jsbin.com/epibab/2/edit

4

1 に答える 1

0

jsBinデモ

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>

そして代わりに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（）を使用しなくてすみません...お任せします。私はいくつかの問題を抱えていて、このjQueryUIを使用することに慣れていませんでした。

于 2012-09-17T20:00:38.403 に答える