0

アクセシビリティの観点からはこれが最善のアイデアではないことはわかっていますが、機能を決定するのは私次第ではありません:)

一度に 1 つの「コンテンツ ボックス」が表示されるようにしたい (合計 3 つある) - 現在表示されているボックスは、どの対応するリンクがホバーされているかによって決定されます (そして、ボックス 1 はページの読み込み前に表示されます)。任意のホバー アクション)。

次の HTML があるとします。

<ul>
    <li id="link-one">Link One</li>
    <li id="link-two">Link Two</li>
    <li id="link-three">Link Three</li>
</ul>

<div id="box-one">Content for box one.</div>
<div id="box-two">Content for box two.</div>
<div id="box-three">Content for box three.</div>

#box-one をデフォルトで表示させたいです。次に、#link-two または #link-three にカーソルを合わせると、それに応じて #box-two または #box-three が表示されます。

転送中にフェードアニメーションがあれば最高です。

これは私がこれに取り組んでいる考え方です-これは有効なjQuery構文ではないことを認識していますが、誰かがこれを実際のものに変えるのを手伝ってくれるなら、私はそれを大いに感謝します!

if ($(#link-one).mouseenter(function() {
    $(#box-one).show();
    $(#box-two).hide();
    $(#box-three).hide();
});)

if ($(#link-two).mouseenter(function() {
    $(#box-two).show();
    $(#box-one).hide();
    $(#box-three).hide();
});)

if ($(#link-three).mouseenter(function() {
    $(#box-three).show();
    $(#box-one).hide();
    $(#box-two).hide();
});)

自己批判: 私のコードは、新しいリンク/ボックス コンボを追加するとうまくスケーリングしません。非常に非効率に思えますが、これを達成する方法が他にわかりません。新しいボックスが表示されるときに、フェードイン/フェードアウト転送を実現するためのより良い方法がおそらくあります。どんなアイデアでも大歓迎です。

ありがとう！

4

1 に答える 1

1

div id またはクラスをアンカーに入れる

<a href="#" rel="divName">...</a>

クリック ハンドラーまたはホバーまたはマウスエンター (好きなもの) をアンカーにバインドし、必要に応じてクラスを追加し、その divName を取得して表示します。すべてを非表示にして、それを表示します。liでも同じことができます

何かのようなもの

$('.className').bind('mouseenter', function() {
    //grab the rel attribute
    var divName = $(this).attr('rel');
    // hide all boxes

    // show the right box
    $('#' + divName).show();
});

非表示にするために、ボックスをdivにグループ化して、より適切にターゲットにできるようにします

于 2012-06-20T17:38:29.080 に答える