隐藏Div直到链接被选中 [英] Hide Div Until Link Is Selected

问题描述

我有一个隐藏/显示导航工作，但似乎无法弄清楚如何隐藏包含所有子div的主div，直到导航中的一个链接被选中。

请看我的小提琴： http://jsfiddle.net/blahblahAMYblah/KptZ6/

为了说清楚，我并不是只想在开始时隐藏所有子div（即about，gallery等），但隐藏了主div 。选择一个链接后，主div应该只显示所选的子div。

更新你的小提琴;

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

如果您不想更改HTML，以下操作将使用javascript隐藏主div。它还以相同的方式隐藏了子项（使用 .hide（））

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

  $（function（）{
 $（'＃main'）。hide（）; 
}）; $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' b $（'＃main'）。children（）。hide（）; 
 $（$（this）.attr（'href'））。show（）; 
 e.preventDefault（）; 
}）; 
  

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.

解决方案

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();
});​

这篇关于隐藏Div直到链接被选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！