How to simplify jquery code?

Good day view this block of code. I need when clicking on the 1st link the opening of the 1st block, 2 = 2 and so on
<a href = "#block1">1</a>
<a href = "#block2">2</a>
<a href = "#block3">3</a>

<div id="block1">Open box 1</div>
<div id="block2">Open box 2</div>
<div id="block3">Open box 2</div>


$(document).ready(function(){
 $('#hidemenu ul li a.hcp').click(function(event){
event.preventDefault();
$('#hcp_page').show();
$('#live_page').hide();
$('#ann_page').hide();
});
 $('#hidemenu ul li a.ann').click(function(event){
event.preventDefault();
$('#ann_page').show();
$('#hcp_page').hide();
$('#live_page').hide();
});
 $('#hidemenu ul li a.live').click(function(event){
event.preventDefault();
$('#live_page').show();
$('#hcp_page').hide();
$('#ann_page').hide();
});
 });
April 7th 20 at 15:28
1 answer
April 7th 20 at 15:30
Solution
<a href="" data-link="block1">1</a>
<a href="" data-link="block2">2</a>
<a href="" data-link="block3">3</a>

<div id="block1" class="block">Open box 1</div>
<div id="block2" class="block">Open box 2</div>
<div id="block3" class="block">Open box 2</div>

$(document).ready(function () {
 $('a').click(function () {
 var link = $(this).data('link');
$('.block').hide();
 $('#'+ link).show();
 return false;
});
 });
Thank you for the correct answer, can you tell what you did, or at least to restore to the article on the correct use of data.... - Astrid.Brek commented on April 7th 20 at 15:33
@Diamond, disassemble code line by line, there is nothing difficult. - barrett_Howe commented on April 7th 20 at 15:36
@Diamond, once upon a time asked the same question, but in reality it's simple. Using the attribute data-[something] we simply implement the features that we wanted without being bound to standard attributes like class, id, title and stuff like that.
The name can be anything, even data-super-puper-kod, for example. The main thing that it was clear which will be used by this date. Everything after the word "data" is the name of the date:
elem.data('super-puper-kod');
In addition to the sample script for temporary storage of data, etc. date you can use pseudo-elements.
/* <div data-link="1"></div> */

div::before {
 content: attr(data-link);
}

Contact date by using a script like that above, it is possible in two ways:
// <div data-link="1"></div>
$(this).data('link');
// or
$(this).attr('data-link');


The main said. =) - bradley.Volkman commented on April 7th 20 at 15:39
@aniyah15, Wow so easy, thanks for the info) - Astrid.Brek commented on April 7th 20 at 15:42

Find more questions by tags jQuery