Страница 3 из 4 < 12 3 4 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Раскрывающийся и сворачивающийся по клику div (https://javascript.ru/forum/dom-window/46783-raskryvayushhijjsya-i-svorachivayushhijjsya-po-kliku-div.html)

Paul12345 15.04.2017 12:12
Рони, возник еще вопрос, помогите, пожалуйста, какой должна быть структура кода и js, чтобы список был в одну линию, а раскрывался контент каждого элемента в одном диве под списком.

рони 15.04.2017 15:14
Paul12345,
искать примеры tabs

http://javascript.ru/forum/dom-window/67121-pereklyuchatel-tabov-v-samikh-vkladkakh-2.html#post442719

http://javascript.ru/forum/misc/6666...tml#post439388

Paul12345 15.04.2017 15:40
Цитата:
Сообщение от рони (Сообщение 450082)
Да, чего-то я затупил, это же обычные табы! )) sorry! Спасибо все равно за ссылки!

Paul12345 15.04.2017 17:52
Использовал вот такую конструкцию:
<!-- Tab -->  
  <span class='tab'>Ссылка 1</span>
  <span class='tab'>Ссылка 2</span>
  <span class='tab'>Ссылка 3</span>

<div class="tab-content">
  <div class="c">Текст 1</div>
  <div class="c none">Текст 2</div>
  <div class="c none">Текст 3</div>
</div> 
            <!-- End Tab -->

<script type="text/javascript">
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = con[0];
[].forEach.call(tabs, function(item, i) {
    item.addEventListener("click", function() {
        temp.classList.add("none");
        temp = con[i];
        temp.classList.remove("none")
    })
});
</script>

Подскажите, как можно задать отдельный фон активной вкладке? Через CSS не получается.
Можно потом перенести сообщение в другую ветку, если здесь не в тему. Спасибо!

рони 15.04.2017 18:04
Цитата:
Сообщение от Paul12345
как можно задать отдельный фон активной вкладке
не могли бы вы пояснить? и чем класс c не устраивает?

Paul12345 15.04.2017 18:06
Я наверно не правильно выразился, фон самого таба

рони 15.04.2017 18:13
Paul12345,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .none  {
    display: none;
  }
  .active {
      background-color: hsla(240, 100%, 40%, 1);
       color: hsla(0, 0%, 100%, 1);
  }

  </style>


</head>

<body>
<!-- Tab -->
  <span class='tab active'>Ссылка 1</span>
  <span class='tab'>Ссылка 2</span>
  <span class='tab'>Ссылка 3</span>

<div class="tab-content">
  <div class="c">Текст 1</div>
  <div class="c none">Текст 2</div>
  <div class="c none">Текст 3</div>
</div>
            <!-- End Tab -->

<script type="text/javascript">
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = 0;
[].forEach.call(tabs, function(item, i) {
    item.addEventListener("click", function() {
        item.classList.add("active");
        tabs[temp].classList.remove("active")
        con[temp].classList.add("none");
        temp = i;
        con[temp].classList.remove("none")
    })
});
</script>


</body>
</html>

Paul12345 15.04.2017 18:18
Да, именно, спасибо огромное!!!

Batyabest 07.07.2017 10:18
Цитата:
Сообщение от рони (Сообщение 309027)
jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ...

Вариант 
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">111</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">222</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">333</a>
  <div class="hide">Спрятанный текст</div>
</div>

<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
      $(this).next().slideToggle(500);
    });
});
</script>

  </body>
</html>
Подскажите, а если я хочу менять текст ссылки при разворачивании на свернуть, при сворачивании на развернуть - как нужно переписать JS?

рони 07.07.2017 11:03
открывашка и смена текста на кнопке
 
Batyabest,
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <style type="text/css">
  .view-source .hide{
    display: none;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">развернуть </a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">развернуть </a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">развернуть</a>
  <div class="hide">Спрятанный текст</div>
</div>

<script>
$(function(){
    $('.view-source .hide');
    var $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.text("развернуть").not(this).next().slideUp(500);
      var $hidden = $(this).next().is(":hidden");
      $(this).next().slideToggle(500);
      $hidden && $(this).text("свернуть");
    });
});
</script>

  </body>
</html>


Часовой пояс GMT +3, время: 14:21.
Страница 3 из 4 < 12 3 4 >
Показывать 40 сообщений этой темы на одной странице