Repeating jQuery condensed using a common id -
so, have following simple jquery common id="private_menu_"
used. way condense repeating 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>
all when anchor clicked, shows selected div , hide else. works fine wanted make clean.
thanks
seperate selectors comma , use attribute starts with selector
jquery("#address,#name,#country,#email").click(function() { var id = $(this).attr('id'); jquery('[id^="private_menu_"]').hide(); jquery('#private_menu_' + id).show(); });
<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>
Comments
Post a Comment