Question

我尝试创建一个菜单，当点击其中一个项目时，通过添加类＆＃34;可见＆＃34;来显示div。

当在菜单上点击第二个项目时，它会假设通过替换类别来隐藏前一个div＆＃34;可见＆＃34;隐藏＆＃34;

我无法隐藏前一个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);
}

HTML

<div class="product_display visible" id="prod_switch_1">content</div>
<div class="product_display visible" id="prod_switch_2">content</div>

Answer 1

修改

第一次完全错误地阅读了这个问题：P你不应该改变任何HTML，只需看看这个JS。

使用JS从所有元素中删除active类，然后将其添加到单击的元素中。

JS：

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); }

Answer 2

要在点击列表项上隐藏任何可见的product_display 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
});

Answer 3

$(".list_male a").click(function(event){
   event.preventDefault();
   $(".product_display").removeClass("visible");//HIDE ALL CONTENTS
   var new_content=$(this).data("content");//GET ID FROM NEW OBJECT TO ADD visible CLASS
   $("#"+new_content).addClass("visible");//SHOW NEW CONTENT
   return false;
});

.visible{
  display:block !important;
}

.product_display{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<ul class="product_dynamic list_male">
<li><a href="" class="prod_switch_1" data-content="content_1"><span class="title">option 1</span></a></li>
<li><a href="" class="prod_switch_2" data-content="content_2"><span class="title">option 2</span></a></li>
</ul>

<div class="product_display" id="content_1">content 1</div>
<div class="product_display" id="content_2">content 2</div>

jquery hide div以前用jquery点击功能加载

3 个答案: