javascript - jquery hide div loaded previously with jquery click function -

I am trying to create a menu that will show a div when an item will be clicked by adding "visible" .

When a second item is clicked on the menu, then it seems that to hide the previous div by changing the "div's" square to "hidden"

I have not been able to hide this last div and I have tried if using conditions I think I am doing something wrong.

I'm using this menu:

  & lt; ul class = "product_dynamic list_male"> gt; & lt; Li & gt; & lt; a href = "class =" prod_switch_1 "& gt; & lt; span class =" title "> option 1   & lt; a href = "" class = "prod_switch_2" & gt; & lt; span class = "title" & gt; option 2 & lt; / span & Gt; & lt; / a & gt; & lt; / li & gt; & lt; / ul & gt;  

Jquery

  For (var i = 1; I & lt; = 3; ++ i) {(function (n) {$ (.produ_switch_ '+ n) .bind (' click ', function () {$ (' # prod_switch_ '+ n) .removeClass (' hidden '); $ ( '# Prod_switch_' + n) .addClass ('View');});}) (i);}  

html

  & lt; Div class = "product_display visual" id = "prod_swi tch_1" & gt; Content & lt; / Div & gt; & Lt; Div class = "product_display visual" id = "prod_switch_2" & gt; Content & lt; / Div & gt; Read  

edit

The question is completely false for the first time: P You do not need to change any HTML, just look at this JS.

Use JS to remove the active class from all elements before clicking to add it.

JS:

 for  (var i = 1; i & lt; = 3; ++ i) {(function (n) {$ ('.prod_switch_ '+ N) .bind (' click ', function () {$ (' # prod_switch_ '+ n) .removeClass (' hidden '); $ ('. Product_display '). RemoveClass (' visible '); $ ( '#prod_switch_' + n) .addClass ('visible');});}) (i); }