Return to Answer

I have no problem setting this up in html - it makes sense in this case.

<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button"><a href="#work" data-fadeOut="#cms,#contact">work</a></li>
<li class="cms_button"><a href="#cms" data-fadeOut="#work,#contact">cms</a></li>
<li class="contact_button"><a href="#contact" data-fadeOut="#cms,#work">contact</a></li>
</ul>
</div>

Set a target on each one

$(function() {
 $('li a', '.menu').click(function(e) {
 e.preventDefault();
 var target = $($(this).attr('href'));
 $($(this).data('fadeOut')).fadeOut(function(){ 
 target.fadeIn();
 });
 })
 $('.panel').hide();
 $('.home_button').click(function(){
 $('.panel:visible').fadeOut();
 });
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do

I have no problem setting this up in html - it makes sense in this case.

<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button"><a href="#work" data-fadeOut="#cms,#contact">work</a></li>
<li class="cms_button"><a href="#cms" data-fadeOut="#work,#contact">cms</a></li>
<li class="contact_button"><a href="#contact" data-fadeOut="#cms,#work">contact</a></li>
</ul>
</div>

Set a target on each one

$(function() {
 $('li a', '.menu').click(function(e) {
 e.preventDefault();
 var target = $($(this).attr('href'));
 $($(this).data('fadeOut')).fadeOut(function(){ 
 target.fadeIn();
 });
 })
 $('.panel').hide();
 $('.home_button').click(function(){
 $('.panel:visible').fadeOut();
 });
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do

I have no problem setting this up in html - it makes sense in this case.

<div class="menu">
<ul class="menu">
<li class="home_button"><a href="" data-fadeOut=".panel:visible">home</a></li>
<li class="work_button"><a href="#work" data-fadeOut="#cms,#contact">work</a></li>
<li class="cms_button"><a href="#cms" data-fadeOut="#work,#contact">cms</a></li>
<li class="contact_button"><a href="#contact" data-fadeOut="#cms,#work">contact</a></li>
</ul>
</div>

Set a target on each one

$(function() {
 $('li a', '.menu').click(function(e) {
 e.preventDefault();
 var target = $($(this).attr('href'));
 $($(this).data('fadeOut')).fadeOut(function(){ 
 target.fadeIn();
 });
 })
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do

I have no problem setting this up in html - it makes sense in this case.

<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button"><a href="#work" data-fadeOut="#cms,#contact">work</a></li>
<li class="cms_button"><a href="#cms" data-fadeOut="#work,#contact">cms</a></li>
<li class="contact_button"><a href="#contact" data-fadeOut="#cms,#work">contact</a></li>
</ul>
</div>

Set a target on each one

$(function() {
 $('li a', '.menu').click(function(e) {
 e.preventDefault();
 var target = $($(this).attr('href'));
 $($(this).data('fadeOut')).fadeOut(function(){ 
 target.fadeIn();
 });
 })
 $('.panel').hide();
 $('.home_button').click(function(){
 $('.panel:visible').fadeOut();
 });
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do

<div class="menu">
<ul class="menu">
<li class="home_button"><a href="#home">home</a></li>
<li class="work_button"><a href="#work">work</a></li>
<li class="cms_button"><a href="#cms">cms</a></li>
<li class="contact_button"><a href="#contact">contact</a></li>
</ul>
</div>

Set a target on each one

$('li a', '.menu').click(function(e) {
 e.preventDefault();
 var target = $($(this).attr('href'));
 $('.panel').fadeOut(function(){ 
 target.fadeIn();
 });
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

By the way, if you don't want all panels to be faded out but only other ones mentioned in the menu, instead of $(.panel) do something like

$(this).closest('.menu').find('li a').not(this).fadeOut(...

Also, a couple things about your code that you should know. First of all, everything should go inside the jquery ready function

$(function() {
 ..code here
})

This will not only force your code not to run until the browser has rendered everything but it will also keep your function from being placed in the global namespace. This does not seem necessary in this particular case but is a good habit in general.

Second, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

I have no problem setting this up in html - it makes sense in this case.

<div class="menu">
<ul class="menu">
<li class="home_button"><a href="" data-fadeOut=".panel:visible">home</a></li>
<li class="work_button"><a href="#work" data-fadeOut="#cms,#contact">work</a></li>
<li class="cms_button"><a href="#cms" data-fadeOut="#work,#contact">cms</a></li>
<li class="contact_button"><a href="#contact" data-fadeOut="#cms,#work">contact</a></li>
</ul>
</div>

Set a target on each one

$(function() {
 $('li a', '.menu').click(function(e) {
 e.preventDefault();
 var target = $($(this).attr('href'));
 $($(this).data('fadeOut')).fadeOut(function(){ 
 target.fadeIn();
 });
 })
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here .

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do