jquery - 根据单击哪个按钮将某些 div 切换为可见或隐藏

Question

我还在接触 jQuery，所以我可能使它变得比需要的更难。我想做的是，当单击一个按钮时，只有一个 div 应该设置为可见。

例如，当点击 .Dist 按钮时，只有名为“Products”的 div 应该设置为可见。单击 .Market 按钮时，只有名为“Apps”的 div 应该可见。单击 .Services 按钮时，只有名为“ServiceSec”的 div 应该可见。

我现在的大部分工作...但是发生的是两个或更多的 div 可以一次显示(即如果我不再次点击 .Dist 按钮关闭“产品”div 然后去单击 .Market 按钮，然后“Markets”div 内容也将显示。)

jQuery.noConflict();
(function ($) {
  $(document).ready(function () {
   if ($(".Dist").click(function (e) {
        $(".Products").toggle();
    }));
    if ($(".Market").click(function (e) {
        $(".Apps").toggle();
    }));
   if($(".Services").click(function (e) {
        $(".ServiceSec").toggle();
    }));
  });
})(jQuery);

有没有一种方法可以轻松地向三个 div(“产品”、“应用程序”和“ServiceSec”)中的每一个添加/删除一个类，以便它们仅在单击正确的按钮时显示？

Answer 1

这应该有效..

<button type="button" id="dist">Products</button>
<button type="button" id="market">Markets</button>

<div class="products all">product1</div>
<div class="products all">product2</div>
<div class="apps all">app1</div>
<div class="apps all">app2</div>

<script type="text/javascript">
    $(document).ready(function () {       
        $('.all').hide();

        $('#dist').on('click', function (e) {
            $('.all').hide();
            $('.products').show();
        });

        $('#market').on('click', function (e) {
            $('.all').hide();
            $('.apps').show();
        });
    });
</script>