0

私はこの非常に簡単なサイトに取り組んでいますが、jQuery をいじってからしばらく経ちました。ここで何か間違ったことをしていると思います。

ここでは、jsFiddle http://jsfiddle.net/rGb34/1/でアイデアをプレビューできます。

jQuery にはいくつかの問題があります。

  1. 黄色のボタンにカーソルを合わせると、黄色のコンテンツがトグルし始めます。
  2. ボタンの上にカーソルを置いてから元に戻すと、(トグル機能により) div が消えますが、ホバーがない場合でも最後の div をアクティブにしたいと思います。

これを終わらせることができるように、誰かが私に良いヒントを持っていますか?

4

3 に答える 3

3

まず第一に：別のタグで同じID名を使用しないでください。あなたの例では、id="slider"でした。

これがjsFiddleで遊ぶことができます（私はあなたのhtmlとcssも編集しました）

あなたはこの方法でそれを行うことができます、はるかにしっかりしています：

jQuery：

jQuery(document).ready(function() {

    $('.greenC, .blueC, .orangeC').hide();

    $('.nav li').hover(function() {
        var takeClass = $(this).attr('class');
       // takes class hovered element. example: '.yellow'

        $('.slider').hide();
        $('.'+ takeClass + 'C').show();// shows the element '.yellowC'
    });

});​

そして、HTMLは次のようになります。

<div class="yellowC slider">...</div>
<div class="greenC slider">...</div>
<div class="blueC slider">...</div>
<div class="orangeC slider">...</div>

<div class="wrap">
  <ul class="nav">
     <li class="yellow"><a href="./" class="y_button">Fiducairy services</a></li>
     <li class="green"><a href="./" class="g_button">Licensing</a></li>
     <li class="blue"><a href="./" class="b_button">Payment processing</a></li>
     <li class="orange"><a href="./" class="o_button">E-zone colocation</a></li>
   </ul>
</div>​
于 2012-07-30T16:04:58.477 に答える
0

ロード時に最初のものを適切に表示したい場合は、イベント ハンドラーdivをより具体的にする必要があります。.yellow

$('.y_active, .yellow').hover(
function() {
    $('.yellow').show();
    $('.green').hide();
    $('.blue').hide();
    $('.orange').hide();
}, function() {
    $('.yellow').hide();
});

デモ

于 2012-07-30T16:16:05.163 に答える
0

$('.green, .blue, .orange, .yellow').hide(); 黄色も非表示にすると、うまくいきます..これはあなたが望むものですか？

于 2012-07-30T15:59:06.870 に答える