使用通用id重复jQuery浓缩

Question

所以，我遵循简单的jQuery，其中使用了常见的<a href="#private_menu_address" id="address">Menu 1</a> <a href="#private_menu_name" id="name">Menu 2</a> <a href="#private_menu_country" id="country">Menu 3</a> <a href="#private_menu_email" id="email">Menu 4</a> <div id="private_menu_address">address</div> <div id="private_menu_name"> name</div> <div id="private_menu_country">country</div> <div id="private_menu_email">email</div> <script> jQuery("#address").click(function () { jQuery('#private_menu_address').show(); jQuery('#private_menu_name').hide(); jQuery('#private_menu_country').hide(); jQuery('#private_menu_email').hide(); }); jQuery("#name").click(function () { jQuery('#private_menu_address').hide(); jQuery('#private_menu_name').show(); jQuery('#private_menu_country').hide(); jQuery('#private_menu_email').hide(); }); jQuery("#country").click(function () { jQuery('#private_menu_address').hide(); jQuery('#private_menu_name').hide(); jQuery('#private_menu_country').show(); jQuery('#private_menu_email').hide(); }); jQuery("#email").click(function () { jQuery('#private_menu_address').hide(); jQuery('#private_menu_name').hide(); jQuery('#private_menu_country').hide(); jQuery('#private_menu_email').show(); }); </script> 。什么是压缩这个重复的jQuery的好方法？

body{
    padding: 0;
    margin: 0;
}

#main{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

#fixedElement{
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility:hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin:auto;
    z-index: -1;
    display: block;
}


.fullWidthImage{
    background: url("http://s.camptocamp.org/uploads/images/1255459227_450187593.jpg") no-repeat center center;	
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%;
    background-size: cover;
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover;			
    overflow: hidden;
    width: 100%;
    height: 100%;		
    margin: 0;	
    padding: 0;
    position: relative;
}


.bottom{
    position: relative;
    top: 500px;
    width: 100%;
    height: 800px;
    background-color: purple;
    margin: 0;
    padding: 0;
}

所有这一切都是当点击一个锚点时，它会显示所选的div并隐藏其他所有内容。它工作正常，但我只是想让它干净。

由于

Answer 1

用逗号分隔选择器并使用attribute starts with选择器

＆＃13;

＆＃13;

 jQuery("#address,#name,#country,#email").click(function() {
   var id = $(this).attr('id');
   jQuery('[id^="private_menu_"]').hide();
   jQuery('#private_menu_' + id).show();
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#private_menu_address" id="address">Menu 1</a>
<a href="#private_menu_name" id="name">Menu 2</a>
<a href="#private_menu_country" id="country">Menu 3</a>
<a href="#private_menu_email" id="email">Menu 4</a>

<div id="private_menu_address">address</div>
<div id="private_menu_name">name</div>
<div id="private_menu_country">country</div>
<div id="private_menu_email">email</div>

＆＃13;

＆＃13;

＆＃13;