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

johnon,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div>p,div.active>a,div.row>div{
    display:none;
  }

  div.row div.active,div.active>p,div.active>div{
    display:block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var div = $(".row, .row > div");
    div.on("click", ">a", function(event) {
        event.preventDefault();
        var parent = $(this).parent();
        div.not(parent.addClass("active")).removeClass("active")
    })
});
  </script>
</head>

<body>
<div class="row active">

<div class="first">
<a href="#">click me 1</a>
<p>text 1</p>
</div>

<div class="second">
<a href="#">click me 2</a>
<p>text 2</p>
</div>

<div class="third">
<a href="#">click me 3</a>
<p>text 3</p>
</div>

<a class="go-back" href="#">link</a>
</div>


</body>
</html>
Ответить с цитированием