默认加载DIV Javascript

Question

Im trying to build a navigation menu where one side is a male that you click on certain area's (ie the head) and on the left side its show the latest products, plus a break down of that section (shaving, razors, beard grooming etc)

My code can be seen here :

<section class="wr-our-brand">
  <div class="container">
    <div class="containerright">  
      <div id="building">
        <img src="images/nav_text.png"  alt="" usemap="#map" style="padding-top:4em;">    
        <map id="map" name="map">
          <area class="link" shape="rect" alt="" title="" coords="69,3,127,31" data-val="one" target="" />
          <area class="link" shape="rect" alt="" title="" coords="138,182,232,256" data-val="two" target="" />
          <area class="link" shape="rect" alt="" title="" coords="53,313,170,339" data-val="three" target="" />
        </map>
      </div>
    </div>

    <div class="containerleft">    
      <div  id="menu">
        <h2>Hello and Welcome</h2>
        <p style="font-size:16px;">Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction. Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction.<br><br> Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction. Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction.<br>
        <p style="font-size:16px;"><br>To view our wide range of products please select an area on the male outline.</p>

        <div class="tab" id="one">This is Hair</div>
        <div class="tab" id="two">This is two</div>
        <div class="tab" id="three">This is three</div>
      </div>
    </div>
  </div>
</section>

Plus the Java Script here:

  <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
  <script>
    $(document).ready(function(){
      $(".link").click(function() {
        var which = $(this).data('val');
        $(".tab").hide();    
        $('#'+which).show();        
      });
    });
  </script>

My problem is that I wish for a welcome 'tab' to load without any user interaction (as seen in my code) however dissapear if the use clicks on another tab. At the moment it just sits there and the new information forms below it.

Cheers

UPDATE CSS

#building {
float: right;
} 
 #menu {
float: left;
width: 100%;
overflow: auto;

}
.tab { display:none; }

Answer 1

I wish for a welcome 'tab' to load without any user interaction

You can do this in css like:

.tab {  display: none; }

The above css would make the tabs to hide but the welcome would be visible to user without any user interaction. But you need to make sure the menu div is not explicitly hidden via css.

Answer 2

I think you should mark the #menu div as position:relative in your css and the tabs should be marked as position:absolute with top:0 and left:0

Next to that, maybe you should put the welcome in a separate div as well and hide it when you open another tab (or make the welcome also a tab)

In this jsFiddle you can see it working with some modifications (I removed the image map, and put the welcome in a div)