Jquery显示div内容，加载并隐藏第一次单击。

Question

我已经创建了一个边菜单栏，菜单项有id的'h1-1', 'h1-2','h1-3'等等。当第一次加载页面时，我需要显示'h1-1'内容。所以我写了代码

 $(document).ready(function() {   
        window.onload = $('#h1-1').show();
    });

但是在这里，当我首先单击其他菜单项时，'h1-1'内容仍然显示在页面上，单击列表项内容显示在'h1-1'内容下面。

但是，当我首先单击'h1-1'本身，然后单击其他列表项时，它工作正常(当我首先显示'h1-1'本身时，'h1-1'内容仍然显示，然后单击其他列表项'h1-1'内容消失并显示单击的项目内容)。

我试着在第一次单击时隐藏'h1-1'内容，但是，即使单击'h1-1'列表项目本身，'h1-1'内容也不会显示。

有人能建议我怎么解决这个问题吗。

小提琴演示

Answer 1

您依赖于curPage的内容来隐藏上一页，但是您将其初始化为"“。相反，将其设置为第一页。

var curPage="h1-1";

更新小提琴

Answer 2

试试这个..。所有密码都在那里..。我刚更新了你的密码。

$(function() {
var curPage="";
$("#menu a").click(function() {
    $('#h1-1').hide();
    if (curPage.length) { 

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

 $(document).ready(function() {   
    window.onload = $('#h1-1').show();
 });

http://jsfiddle.net/M3ZhV/454/

Answer 3

我觉得你让事情变得复杂了。使用选择器获取要隐藏的所有元素(jsFiddle)。

$(function() {
    $('#h1-1').show();
    $("#menu a").click(function() {
        var curPage = $(this).data("page");
        $('.main div.content').hide();
        $("#" + curPage).show();
    });
});