Question

我需要一些简单的调整，我正在努力做对。

这是我的JS代码和小提琴：

$(document).ready(function(){
$("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $("#menu_container div").hide(); 
  $("#menu_container #menu_"+id[1]).show();
 });
});

http://jsfiddle.net/KUtY5/1/

基本上我只需要让更改产生过渡效果，最重要的是我需要在页面加载时显示第一个框。

谢谢。

Answer 1

您可以使用slide创建效果：

$("#menu_container div").slideUp("slow", function() {
     $("#menu_container #menu_"+id[1]).slideDown("slow");
});

对于页面加载时显示，请在加载时调用.show()或删除该特定div的CSS中的display:none;。

Answer 2

您可以使用 .eq() 来获取第一个div并默认显示， .fadeIn() 以显示效果：

$(document).ready(function () {
    $('#menu_container div').eq(0).show();
    $("#nav a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $("#menu_container div").hide();
        $("#menu_container #menu_" + id[1]).fadeIn();
    });
});

<强> Updated Fiddle

Jquery显示/隐藏功能几乎就在那里

2 个答案: