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

tk.stas,

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   $(document).ready(function()
     {
       var p = $("p"), i = localStorage.getItem("indx")||0;
       p.eq(i).addClass("selected");
            $(document).on("click", ".next, .prev",  function(event)
         {
           event.preventDefault();
           var selected = $(".selected");
           selected.removeClass("selected");
           if($(this).hasClass("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }
           selected.addClass("selected");
           i = p.index(selected);
           localStorage.setItem("indx", i);
         }
       )
     }
   );
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>
Ответить с цитированием