Hide Several Divs, Show 1 By Default, And Switch (show/hide) Between Them Based On Link Click?

I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and ca

Solution 1:

$("div.containter ul li").each(function(){
    $(this).onclick(function(){

       $("div.content").hide();

      $("div" + $(this).attr("href")).show();

    });
});

Wrap that in a $(document).ready or whereever and you should be good to go my friend. Learn the code, so that in the future, you are gosu.

Solution 2:

How about adding some more RESTful behaviour.

$(function(){
   // get the location hashvar hash = window.location.hash;
   // hide all
   $('div.content').hide();
   if(hash){
      // show the div if hash exist
      $(hash).show();
   }else{
      // show default 
      $("#ver1").show();
   }
   $("div.containter ul li a").click(function(){
      // hide all
      $('div.content').hide();
      $($(this).attr("href")).show();
   });
});

Solution 3:

I suggest you to use on() jquery function with selector. And also you can show the default div using css. Here is the complete code.