Вертикальная вкладка не работает

Question

Я создаю вертикальную вкладку, но она не работает. Я не могу найти, где проблема.

HTML:

<ul id="sidemenu"> 
    <li> 
    <a href="#home-content" class="open"><i class="icon-home icon-large"></i><strong>Home</strong></a> 
    </li> 

    <li> 
    <a href="#about-content"><i class="icon-info-sign icon-large"></i><strong>About</strong></a> 
    </li> 

    <li> 
    <a href="#ideas-content"><i class="icon-lightbulb icon-large"></i><strong>Ideas</strong></a> 
    </li> 

    <li> 
    <a href="#contact-content"><i class="icon-envelope icon-large"></i><strong>Contact</strong></a> 
    </li> 
</ul> 
<div id="content"> 
    <div id="home-content" class="contentblock"> 
     <h1>The Main Page!</h1> 
     <p>I swear this has some really great stuff. Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p> 

     <p>Smack of ham. What is she doing at a beauty pageant? Is she running the lights or something? She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome.</p> 

     <p>Probably out there without a flipper, swimming around in a circle, freaking out his whole family.</p> 

     <p>Fun and failure both start out the same way.</p> 
    </div><!-- @end #home-content --> 


    <div id="about-content" class="contentblock hidden"> 
     ... 
    </div><!-- @end #about-content --> 

    <div id="ideas-content" class="contentblock hidden"> 
     ... 
    </div><!-- @end #ideas-content --> 

    <div id="contact-content" class="contentblock hidden"> 
     ... 
    </div><!-- @end #contact-content --> 
</div><!-- @end #content --> 

CSS:

@import url('http://fonts.googleapis.com/css?family=Cantora+One'); 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    outline: none; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html { overflow-y: scroll; } 
body { 
    font-size: 62.5%; 
    line-height: 1; 
    padding: 45px 20px; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    background: #fff url('../images/bg.png'); /* http://subtlepatterns.com/connected/ */ 
} 

br { display: block; line-height: 1.6em; } 
img { border: 0; max-width: 100%; } 

h1 { 
    font-family: 'Cantora One', Arial, sans-serif; 
    font-size: 3.0em; 
    line-height: 1.6em; 
    margin-bottom: 10px; 
    color: #787878; 
} 

p { 
    font-size: 1.4em; 
    line-height: 1.25em; 
    color: #575757; 
    font-weight: normal; 
    margin-bottom: 10px; 
} 

a { color: #8dadd8; } 
a:hover { color: #7299cf; } 

/* main page */ 
#w { 
    display: block; 
    width: 900px; 
    margin: 0 auto; 
    background: none; 
} 


#content { 
    display: block; 
    background: #fff; 
    padding: 0px 15px; 
    margin-left: 80px; 
    -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.4); 
    -moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.4); 
    box-shadow: 1px 2px 1px rgba(0,0,0,0.4); 
    min-height: 300px; 
} 


.contentblock { 
    display: block; 
    padding: 15px 20px; 
} 

.contentblock.hidden { 
    display: none; 
} 
/* side navigation */ 
#sidemenu { 
    margin: 0; 
    padding: 0; 
    width: 80px; 
    float: left; 
    background: #e8e8e8; 
    border-right: 1px solid #c9c9c9; 
} 


#sidemenu li { display: block; text-align: center; border-top: 1px solid #fff; font-size: 1.1em; } 

#sidemenu li a { 
    display: block; 
    padding: 6px 2px; 
    color: #555; 
    text-decoration: none; 
    border-bottom: 1px solid #d1d1d1; 

} 
#sidemenu li a:hover { 
    background: #f2f2f2; 
} 

#sidemenu li a strong { 
    display: block; 
    margin-top: 5px; 
} 

#sidemenu li a.open { 
    width: 101%; 
    background: #fff; 
} 

Jquery:

$(function(){ 
    $('#sidemenu a').on('click', function(e){ 
    e.preventDefault(); 

    if($(this).hasClass('open')) { 
     // do nothing because the link is already open 
    } else { 
     var oldcontent = $('#sidemenu a.open').attr('href'); 
     var newcontent = $(this).attr('href'); 

     $(oldcontent).fadeOut('fast', function(){ 
     $(newcontent).fadeIn().removeClass('hidden'); 
     $(oldcontent).addClass('hidden'); 
     }); 


     $('#sidemenu a').removeClass('open'); 
     $(this).addClass('open'); 
    } 
    }); 
}); 

Проблема заключается в том, когда нажмите на вкладках кондитер палатка этой вкладки не отображается, и только URL-адрес изменяется.

Это Demo.

Answer 1

После того как я добавил библиотеку Jquery к вашему jsFiddle, она работала отлично

jsFiddle

code