Форум

Paul12345 · #21 (**permalink**) 15.04.2017, 12:12

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

рони · #22 (**permalink**) 15.04.2017, 15:14

Paul12345,
искать примеры tabs

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

Самый простой код табов

Paul12345 · #23 (**permalink**) 15.04.2017, 15:40

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

Paul12345,
искать примеры tabs

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

Самый простой код табов

Да, чего-то я затупил, это же обычные табы! )) sorry! Спасибо все равно за ссылки!

Paul12345 · #24 (**permalink**) 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 не получается.
Можно потом перенести сообщение в другую ветку, если здесь не в тему. Спасибо!

рони · #25 (**permalink**) 15.04.2017, 18:04

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

как можно задать отдельный фон активной вкладке

не могли бы вы пояснить? и чем класс c не устраивает?

Paul12345 · #26 (**permalink**) 15.04.2017, 18:06

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

рони · #27 (**permalink**) 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 · #28 (**permalink**) 15.04.2017, 18:18

Да, именно, спасибо огромное!!!

Batyabest · #29 (**permalink**) 07.07.2017, 10:18

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

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?

рони · #30 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript