Форум

Dilettante_Pro · #11 (**permalink**) 27.12.2016, 10:42

Сообщение от johnon

Мне нужно , чтобы остальные из кликнутой ссылки появлялся параграф ,а остальные дивы исчезали. Ну и ссылку на исходный вариант по возможности.

Тут переводчик на русский, или любой другой, но язык, нужен

Не уверен, но кажется, пост 5 под это подходит.
Ссылку на исходный вариант - что? Показать или спрятать? Возможно все.

johnon · #12 (**permalink**) 27.12.2016, 10:56

Извиняюсь за изложение. Вот перевод:
Допуcтим код такой:

<div class="row">

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

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

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

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

Если например кликнуть на ссылку в диве с классом first , то появляется его текст и ссылка с классом go-back , а дивы с классами second и third исчезают. Затем, при нажатии ссылки с классом go-back все возвращается в исходное положение.

Dilettante_Pro · #13 (**permalink**) 27.12.2016, 11:12

johnon,
А как насчет ссылки в кликнутом диве? Оставлять или прятать?
И еще: пробовали самостоятельно доработать пост 5?

johnon · #14 (**permalink**) 27.12.2016, 11:25

Ссылку в кликнутом диве спрятать.

Боюсь не смогу ничего дорабтать из 5-го поста...(

Dilettante_Pro · #15 (**permalink**) 27.12.2016, 11:45

<!DOCTYPE html>

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

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var div = $('div');
div.on('click', 'a', function(event) {
    event.preventDefault();
    var parent = $(this).parent();
    $('p',parent).show();
    $('a').hide();
    $('.go-back').show();
});
$('.go-back').on('click', function(event) {
    event.preventDefault();
    $('a').show();
    $('p').hide();
    $('.go-back').hide();
})
});
  </script>
</head>

<body>
<!--первый элемент-->
<div>
<a href="#">link-1</a>
<p>text1</p>
</div>
<!--второй элемент-->
<div>
<a href="#">link-2</a>
<p>text2</p>
</div>
<!--третий элемент-->
<div>
<a href="#">link-3</a>
<p>text3</p>
</div>
<a class="go-back" href="#">link<a/>

</body>
</html>

johnon · #16 (**permalink**) 27.12.2016, 11:50

Спасибо вам огромное!

рони · #17 (**permalink**) 27.12.2016, 12:12

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>

Форум

Справочник

Discord чат

Курсы javascript