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's 必须是唯一的，使用class来代替。还有一件事情; 不要忘记关闭 html 元素，你li的 s 没有关闭。

更新：如果你只想 bg 淡入比你应该分离元素。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 
  });
});

但是，如果您正在调用一个新页面，这将无法按您的意愿工作，因为内容将被刷新。

解决此问题的一种方法是使用 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
})

您将需要找出按下了哪个按钮并对其进行淡入。这取决于您使用的技术和品味，但一种方法是在带有所选菜单项的页面上放置一个 var。

于 2013-01-31T12:54:24.937 回答