优化 Show/Hide 来自不同来源的多个 div

Question

我想有四个按钮（在 Divi Builder 上称为 blurbs），当我点击其中一个时，它会显示一个特定的部分（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 你可以在你的菜单点击事件中添加一个与你的 divs id 同名的属性并添加一个相同的 class 全部 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>

优化 Show/Hide 来自不同来源的多个 div

Optimise Show/Hide multiple divs from different sources

optimization

jquery

onclick

toggle