Показать сообщение отдельно
  #2 (permalink)  
Старый 12.04.2014, 14:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

zeppeline,
Вариант ...
<!DOCTYPE html>

<html>
<head>
 <meta charset="utf-8">
  <title>- jsFiddle demo by zeppeline</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'>
</script>

  <style type='text/css'>
    .price div:nth-child(n+2),.toggle_sheet div:nth-child(n+2){
      display: none;
    }
    .toggle_sheet:hover div{
       display: block;
    }

  </style>
  <script>
 $(window).load(function () {
     var curr = ".byr_toggle",
         $price = $(".price>"),
         $sheet = $(".toggle_sheet>");
     $(".toggle_sheet").on("click", ">", function (event) {
         event.preventDefault();
         var indx = $sheet.index(this);
         $(".toggle_sheet").prepend($(this));
         $(".price").prepend($price.eq(indx));
     })
     $(curr).trigger("click")
 });
  </script>
</head>

<body>
  <div id="multiprice">
    <div class="price" style="float:left">
      <div class="usd_price">
        $ 69
      </div>

      <div class="eur_price">
        &euro; 50
      </div>

      <div class="byr_price">
        495000
      </div>
    </div>

    <div class="toggle_sheet" style="float:left; margin:6px;">
      <div class="usd_toggle" >
        <a href="#">USD</a>
      </div>

      <div class="eur_toggle" >
        <a href="#">EUR</a>
      </div>

      <div class="byr_toggle">
        <a href="#">BYR</a>
      </div>
    </div>
  </div>
</body>
</html>
Ответить с цитированием