title: vertical tab with jQuery create link
body: <p>I'm trying to create a link using a div id like as: <code>index.html#section3</code>, <code>index.html#section4</code> but it is not working:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;jQuery Vertical Tabs&lt;/title&gt;
  &lt;style type="text/css"&gt;
  ul#verticalNav {
      float:left;
      clear:left;
      width:15%;
  }
  div#sections {
      float:right;
      clear:right;
      width:80%;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript" 
  
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function showSection( sectionID ) {
      $('div.section').css( 'display', 'none' );
      $('div'+sectionID).css( 'display', 'block' );
  }
  $(document).ready(function(){
      if (
          $('ul#verticalNav li a').length &amp;&amp;
          $('div.section').length
      ) {
          $('div.section').css( 'display', 'none' );
          $('ul#verticalNav li a').each(function() {
              $(this).click(function() {
                  showSection( $(this).attr('href') );
              });
          });
          $('ul#verticalNav li:first-child a').click();
      }
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Vertical Navigation Example&lt;/h1&gt;
      &lt;p&gt;This page demonstrates a simple tabbed jQuery 
  
  navigation scheme.&lt;/p&gt;
      &lt;ul id="verticalNav"&gt;
          &lt;li&gt;&lt;a href="#section1"&gt;Section I&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#section2"&gt;Section II&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#section3"&gt;Section III&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="sections"&gt;
          &lt;div class="section" id="section1"&gt;
              &lt;h2&gt;Section I&lt;/h2&gt;
              &lt;p&gt;Some content specific to this section...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="section" id="section2"&gt;
              &lt;h2&gt;Section II&lt;/h2&gt;
              &lt;img src="#" alt="BADGER" /&gt;
          &lt;/div&gt;
          &lt;div class="section" id="section3"&gt;
              &lt;h2&gt;Section III&lt;/h2&gt;
              &lt;img src="#g" alt="SNAKE" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>