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'内容仍然显示，然后点击其他列表项{{ 1}}内容消失并显示点击的项目内容。）

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

任何人都可以提出一种方法来解决这个问题。

Fiddle Demo

Answer 1

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

$(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 2

我认为你让事情复杂化了。使用选择器可以隐藏所有元素（jsFiddle）。

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

Answer 3

只需更改var curPage =“”; to var curPage =“h1-1”;

$(function() {
    var curPage="h1-1";
    $("#menu a").click(function() {
        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });
});
$(document).ready(function() {   
    window.onload = $('#h1-1').show();
});

http://jsfiddle.net/M3ZhV/457/

Answer 4

您依靠curPage的内容隐藏上一页，但您将其初始化为“”。而是将其设置为第一页。

var curPage="h1-1";

Updated fiddle

Jquery显示div内容onload并隐藏第一次单击

4 个答案: