Смена содержимого DIV при клике по ссылкам

[silmarion]

Добрый день,
пытаюсь реализовать смену стоимости товара в другой валюте при клике по ссылке.
Есть основная цена в USD - $cpr
и цены, которые вычисляются с xml банка,
переменные у них такие
Евро - $eurC
рубли - $rubC

основной блок с ценой
<div id="price">тут цена в USD</div>

скрытые блоки
<div id="usd" class="hidden">тут цена в USD</div>
<div id="eur" class="hidden">тут цена в EUR</div>
<div id="rub" class="hidden">тут цена в RUB</div>

и ссылки
<a href="#" id="usdlink" >USD</a>
<a href="#" id="EURlink">EUR</a>
<a href="#" id="RUBink">RUB</a>

Как собственное все это дело заставить работать, чтобы при клике по ссылкам в блоке price менялась цена, без перезагрузки страницы естественно?

 

[Q_BASIC]

В head подключите jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

и потом:

<div id="price">8 рублей</div>
<a onclick="$('#price').text('10 рублей');">Сменить цену</a>

 

[Nikita_Sp]

Немного переписал верстку, сделав вариант кода для любого кол-ва валют.
Добавил соответствующие классы для блоков, хранящих значение с валютой, чтобы можно было по ID ссілки сразу обратиться к блоку и в блок #price записать значение из нужного блока.

Что делает скрипт:
при клике на ссылку в блоке .currencyLinks он берет ID ссылки ( $(this).attr('id') ), чтобы подставить в запрос к какому блоку обратиться и берет его html ( $( "."+$(this).attr('id') ).html() ) и вставляет собственно в твой блок #price.

<script>
$(document).ready(fucntion(){
$(".curencyLinks a").click(function(){
$("#price").html( $( "."+$(this).attr('id') ).html() );
});
});
</scirpt>

<div id="price">тут цена в USD</div>

<div id="usd" class="hidden usdlink">тут цена в USD</div>
<div id="eur" class="hidden EURlink">тут цена в EUR</div>
<div id="rub" class="hidden RUBlink">тут цена в RUB</div>

<div class="currencyLinks">
<a href="#" id="usdlink" >USD</a>
<a href="#" id="EURlink">EUR</a>
<a href="#" id="RUBink">RUB</a>
</div>