Как упростить jquery код?

Question

[k4sus]

Доброго времени суток посмотрите этот блок кода. Мне нужно при клике на 1-ю ссылку открытие 1-го блока, 2 = 2 и тд

<a href = "#block1">1</a>
<a href = "#block2">2</a>
<a href = "#block3">3</a>

<div id="block1">Открыт блок 1</div>
<div id="block2">Открыт блок 2</div>
<div id="block3">Открыт блок 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();
		});
    });

Answer 1

[Евгений]

<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">Открыт блок 1</div>
<div id="block2" class="block">Открыт блок 2</div>
<div id="block3" class="block">Открыт блок 2</div>

$(document).ready(function () {
        $('a').click(function () {
            var link = $(this).data('link');
            $('.block').hide();
            $('#'+ link).show();
            return false;
        });
    });

Comments

[k4sus]

Благодарю за корректный ответ, можете подсказать что вы сделали, или хотя навести к статье о правильной применении data....

[Andrew]

k4sus, построчно разберите код, там нет ничего сложного.

[Антон Усачев]

k4sus, когда-то давно тоже задавался этим вопросом, а на деле все просто. Через атрибут data-[что-то] мы просто реализуем нужные нам возможности без привязке к стандартным атрибутам вроде class, id, title и прочим подобным.
Название может быть любым, даже data-super-puper-kod, например. Главное, чтобы самому было понятно, для чего будет использоваться эта дата. Все, что после слова "data-" является именем даты:
elem.data('super-puper-kod');
Помимо выборки скриптом, временного хранения данных и т.д. дату можно использовать в псевдоэлементах.

/* <div data-link="1"></div> */

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

Обратиться к дата через скрипт вроде того, что выше, можно двумя способами:

// <div data-link="1"></div>
$(this).data('link');
// или
$(this).attr('data-link');

Основное сказал. =)

[k4sus]

Антон Усачев, Ого так просто, благодарю за информацию)