Hide several divs, show 1 by default, and switch (show/hide) between them based on link click?

Question

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 fou

Answer 1

How about adding some more RESTful behaviour.

$(function(){
   // get the location hash
   var 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();
   });
});

Answer 2

$("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.

Answer 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.