Hide Div Until Link Is Selected

问题

I have a hide/show navigation working but can't seem to figure out how to hide the main div that contains all the children divs until one of the links in the navigation is selected.

Please see my fiddle: http://jsfiddle.net/blahblahAMYblah/KptZ6/

To be clear, I do not just want all the children divs (ie. about, gallery, etc.) hidden at the start, but the main div hidden. Once a link is selected, then the main div should show with only the selected child div showing as well.

回答1:

I've updated your fiddle;

http://jsfiddle.net/KptZ6/2/

If you don't want to change the HTML, the following will hide the main div using javascript. It also hides the children the same way (using .hide())

http://jsfiddle.net/KptZ6/5/

$(function() {
    $('#main').hide();
});

$('body').on('click','nav a', function(e) {
    $('#main').show();
    $('#main').children().hide();
    $($(this).attr('href')).show();
    e.preventDefault();
});

回答2:

Just hide the div initially then show it when an item is clicked

$('body').on('click','nav a', function(e) {
    $('#main').css('display', 'block');
    $('#main').children().addClass('hide');
    $($(this).attr('href')).removeClass('hide');
    e.preventDefault();
});

#main{
    display:none;
}

DEMO

回答3:

not sure if you want something like this, here is an update:

http://jsfiddle.net/KptZ6/3/

来源：https://stackoverflow.com/questions/12168914/hide-div-until-link-is-selected

标签

jquery

html

hide