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

Question

我尝试有四个按钮(在Divi上称为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的事件，并为所有div添加一个相同的类，用于在同一时间隐藏每个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>

​