优化显示/隐藏来自不同来源的多个 div

Question

我正在尝试使用四个按钮（在 Divi Builder 上称为简介），当我单击其中一个时，它将显示一个特定部分 (div) 并隐藏其他三个部分，因此只有一个显示在一次。

这是我目前拥有的：

<!--Photographer script-->
<script>
jQuery(document).ready(function(){
    jQuery("#bphotographer").click(function(){
        jQuery("#sclient").hide();
        jQuery("#sshoot").hide();
        jQuery("#sproduct").hide();        
    });
    jQuery("#bphotographer").click(function(){
        jQuery("#sphotographer").show();
    });
});
</script>

<!--Client script-->
<script>
jQuery(document).ready(function(){
    jQuery("#bclient").click(function(){
        jQuery("#sphotographer").hide();
        jQuery("#sshoot").hide();
        jQuery("#sproduct").hide();        
    });
    jQuery("#bclient").click(function(){
        jQuery("#sclient").show();
    });
});
</script>

<!--Shoot script-->
<script>
jQuery(document).ready(function(){
    jQuery("#bshoot").click(function(){
        jQuery("#sphotographer").hide();
        jQuery("#sclient").hide();
        jQuery("#sproduct").hide();        
    });
    jQuery("#bshoot").click(function(){
        jQuery("#sshoot").show();
    });
});
</script>

<!--Product script-->
<script>
jQuery(document).ready(function(){
    jQuery("#bproduct").click(function(){
        jQuery("#sphotographer").hide();
        jQuery("#sclient").hide();
        jQuery("#sshoot").hide();        
    });
    jQuery("#bproduct").click(function(){
        jQuery("#sproduct").show();
    });
});
</script>

它不是很优化，但它可以工作，并且在 Chrome 的“检查”面板中没有出现任何错误。

大家对如何优化有什么建议吗？

谢谢，

理查德

Answer 1

如果您只想显示和隐藏一个 div，您可以在菜单点击事件中添加一个与您的 div id 名称相同的属性，并为所有 div 添加一个相同的类以同时隐藏每个。

请尝试以下：

$(".menu").click(function(){
  $(".tab").hide();
  $("#"+ $(this).attr("data-div") ).show();
});

.menu{
  cursor:pointer;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bphotographer" class="menu" data-div="sphotographer">bphotographer</div>
<div id="bshoot" class="menu" data-div="sshoot">bshoot</div>
<div id="bclient" class="menu" data-div="sclient">bclient</div>
<div id="bproduct" class="menu" data-div="sproduct">bproduct</div>


<div id="sphotographer" class="tab" style="display:none;height:100px;height:100px;background:blue"></div>
<div id="sshoot" class="tab" style="display:none;height:100px;height:100px;background:red"></div>
<div id="sclient" class="tab" style="display:none;height:100px;height:100px;background:yellow"></div>
<div id="sproduct" class="tab" style="display:none;height:100px;height:100px;background:green"></div>