Javascript 以前使用jquery单击函数加载的jquery隐藏div

我试图创建一个菜单，通过添加类“visible”，在单击其中一个项时显示一个div

当在菜单上单击第二项时，假定它通过将类“可见”替换为“隐藏”来隐藏上一个div

我不能让它隐藏上一个div，我已经尝试使用if条件，我猜我做错了什么。我很感谢在这方面的任何帮助

这是我正在使用的菜单：

<ul class="product_dynamic list_male">
<li><a href="" class="prod_switch_1"><span class="title">option 1</span></a></li>
<li><a href="" class="prod_switch_2"><span class="title">option 2</span></a></li>
</ul>

Jquery

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

---

for（var i=1；i要在单击列表项时隐藏任何可见的产品显示div，请尝试：

$('.product_dynamic a').on('click', function(evt) {
  $('.product_display.visible').removeClass('visible'); // hide all visible product_display divs

  var targetID = $(evt.target).attr('class'); // get ID of element to show
  $('#' + targetID).addClass('visible'); // show that element
});

编辑

第一次完全错误地阅读这个问题：p您不需要更改任何HTML，只需看看这个JS

在将类添加到单击的元素之前，使用JS从所有元素中删除
活动的
类

JS:

for（var i=1；i
$（“.list_-a”）。单击（函数（事件）{
event.preventDefault（）；
$（“.product_display”）.removeClass（“可见”）；//隐藏所有内容
var new_content=$（this）.data（“content”）；//从新对象获取ID以添加可见类
$（“#”+新内容）.addClass（“可见”）；//显示新内容
返回false；
})；
。可见{
显示：块！重要；
}
.产品展示{
显示：无；
}





内容1
内容2
菜单的数量是固定的还是动态的？每项增加1个，但没有改变我仍然没有理解你我的意思是只有2个
lol我注意到了。它没有按我想要的方式工作，但我设法用它修改了我的代码并使其工作。谢谢！没问题，很高兴你把它整理好了：D
$('.product_dynamic a').on('click', function(evt) {
  $('.product_display.visible').removeClass('visible'); // hide all visible product_display divs

  var targetID = $(evt.target).attr('class'); // get ID of element to show
  $('#' + targetID).addClass('visible'); // show that element
});

for (var i = 1; i <= 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);
}