1

私はメニュー構造を持っています：

<ul id="nav">
    <li id="button1" class="active"><a href="#page-1" title="creative">creativ</a><
   <li id="button1"><a href="#page-1" title="creative">creativ</a></ul>

.activeそして、クラスごとに背景画像を追加します。

#nav li.active a{cursor:default;
                 background:url(images/nav-li-a_hover.png) no-repeat bottom center;
                 padding-bottom:5px;}

動作しています。しかし、メニュー項目をクリックすると、フェード効果のある背景画像が表示されます。jQueryまたはCSS3を介してこれを行うにはどうすればよいですか？

4

2 に答える 2

1

まず第一に、id異なるオブジェクトで同じものを使用しないでください。idは一意である必要があり、class代わりに使用してください。後もう一つ; html要素を閉じることを忘れないでください。あなたliのsを閉じることはありません。

更新： bgのみをfadeInにする場合は、要素を分離する必要があります。s内部に要素を作成し、次のaように操作します。

$('ul#nav li').click(function() {
    $(this).closest('s').hide().addClass('.active').fadeIn(500);
});

真のhtml：

<ul id="nav">
   <li class="button1 active"><a href="#page-1" title="creative">creativ<s></s></a></li>
   <li class="button1"><a href="#page-1" title="creative">creativ<s></s></a></li>
</ul>

css：

#nav li.active s {background:url(images/nav-li-a_hover.png) no-repeat bottom center;}
于 2013-01-31T12:28:12.203 に答える
0

私が正しく理解していれば、あなたはこのようなことをすることができます：

$('.menu_item').click(function() {
  $(this).fadeIn('slow', function() {
    //completed animation 
  });
});

ただし、新しいページを呼び出す場合は、コンテンツが更新されるため、これは希望どおりに機能しません。

これを回避する1つの方法は、ajaxリクエストを使用することです。これが成功すると、ページのセクションが更新され、ナビゲーションセクションは影響を受けません。

$.ajax({
    type: "GET",
    url: url,
    data: {"data":data },
    success: function(response){
        //success code
        $("#content").html(response)
    },
    error: function(response){
        //error code
    }
});

または、新しいページが読み込まれたときにフェードを実行できます。

$(document).ready(function(){
   //actions
})

どのボタンが押されたかを確認し、それにフェードインする必要があります。これは、使用しているテクノロジーと好みによって異なりますが、そのための1つの方法は、選択したメニュー項目を含むページに変数を配置することです。

于 2013-01-31T12:54:24.937 に答える