Question

好的，所以我想在点击菜单项时淡出我的内容，并根据href链接淡入新内容。示例：http://www.domain.com/index.php#home 我点击第2页 #home淡出然后#page2淡入 http://www.domain.com/index.php#page2

我已将代码上传到JSFiddle。

<>

http://jsfiddle.net/83GFu/

Answer 1

我在这里更新了你的小提琴：http://jsfiddle.net/j45Lf/

更新为在文档准备就绪时使用点击处理程序，然后使用数据属性来了解要显示/隐藏的页面。

JS：

$(document).ready(function(){
    $(".navlist a").click(function(e){
      $(".page").hide();

      $("#" + $(this).data("page")).show();
    });        
});

HTML：

<ul class="navlist">
    <li class="litem" name="home">
        <a data-page="body_home" href="#body_home">Home</a>
    </li>
    <li class="litem" name="hello">
        <a data-page="body_hello" href="#body_hello">Hello</a>
    </li>
</ul>

<div id="body_home" class="page" style="display:none;>
  ...
</div>   

<div id="body_hello" class="page" style="display: none;">
  ...
</div>

Answer 2

如果您还没有注意到它，$(document).ready()仅在页面加载或页面刷新时触发。单击仅在同一页面上的URL中添加片段的<a>标记将不会重新加载页面本身。

因此，您还需要使用<a>点击click()点击另一个处理程序。

$('.litem a').click(function () {

    ShowPage($(this).attr('href').substring(1))
});

function ShowPage(a) {
    $(".page").css("display", "none");//.hide() will do
    //don't need to set display, fadeIn already does that
    $("#body_" + a).fadeIn(1000)//.css("display", "block");
    //window.location.hash = "#" + a;, it's not necessary to reset the hash
    $(".litem").attr("id", "");
    $("li[name=" + a + "]").attr("id", "selected")
}

Answer 3

你也可以使用.fadeIn（）来获得一个更漂亮然后简单的显示。

例如

（文档）$。就绪（函数（）{ $（＆＃34; .navlist a＆＃34;）。click（function（e）{ $（＆＃34;。第＆＃34）。隐藏（）;
    $("#" + $(this).data("page")).fadeIn();
});         });

淡出div然后Fade in new div Jquery

3 个答案: