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

tk.stas,
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   window.onload = function(){
       var p = document.querySelectorAll("p"), i = +localStorage.getItem("indx")||0;
        p[i].classList.add("selected");
     document.querySelector('.next').addEventListener('click', function(event){
          event.preventDefault();
            p[i].classList.remove("selected");
            i = ++i%p.length;
            p[i].classList.add("selected");
            localStorage.setItem("indx", i);
     }, false);
     document.querySelector('.prev').addEventListener('click', function(event){
          event.preventDefault();
            p[i].classList.remove("selected");
            i--;
            i < 0 && (i = p.length-1);
             p[i].classList.add("selected");
            localStorage.setItem("indx", i);
     }, false);
}
  </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>
Ответить с цитированием