最適化異なるソースから複数のdivを表示/非表示

Question

Divib Builderでblurbsと呼ばれる4つのボタンをクリックしようとしていますが、どちらかをクリックすると特定のセクション（div）が表示され、一度に表示されるのは1つだけです。

<!--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> 

それは非常に最適化されていないが、それは動作し、エラーがクロームの点検パネルに表示されていない：

この

は、私が現在持っているものです。

皆さんに最適化の方法はありますか？

は、あなたがショーを行うと、唯一のdivを非表示にしたい場合は、あなたのdivのIDと同じ名前を使用して、メニューのクリックイベントに属性を追加し、ために1つの同じクラスを追加することができます

リチャード、

Answer 1

をありがとうすべての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>