Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 15.04.2017, 12:12
Новичок на форуме
Отправить личное сообщение для Paul12345 Посмотреть профиль Найти все сообщения от Paul12345
 
Регистрация: 25.02.2017
Сообщений: 9

Рони, возник еще вопрос, помогите, пожалуйста, какой должна быть структура кода и js, чтобы список был в одну линию, а раскрывался контент каждого элемента в одном диве под списком.
Ответить с цитированием
  #22 (permalink)  
Старый 15.04.2017, 15:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,891

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

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


Самый простой код табов
Ответить с цитированием
  #23 (permalink)  
Старый 15.04.2017, 15:40
Новичок на форуме
Отправить личное сообщение для Paul12345 Посмотреть профиль Найти все сообщения от Paul12345
 
Регистрация: 25.02.2017
Сообщений: 9

Сообщение от рони Посмотреть сообщение
Paul12345,
искать примеры tabs

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


Самый простой код табов
Да, чего-то я затупил, это же обычные табы! )) sorry! Спасибо все равно за ссылки!
Ответить с цитированием
  #24 (permalink)  
Старый 15.04.2017, 17:52
Новичок на форуме
Отправить личное сообщение для Paul12345 Посмотреть профиль Найти все сообщения от Paul12345
 
Регистрация: 25.02.2017
Сообщений: 9

Использовал вот такую конструкцию:
<!-- 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 не получается.
Можно потом перенести сообщение в другую ветку, если здесь не в тему. Спасибо!

Последний раз редактировалось Paul12345, 15.04.2017 в 17:55.
Ответить с цитированием
  #25 (permalink)  
Старый 15.04.2017, 18:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,891

Сообщение от Paul12345
как можно задать отдельный фон активной вкладке
не могли бы вы пояснить? и чем класс c не устраивает?
Ответить с цитированием
  #26 (permalink)  
Старый 15.04.2017, 18:06
Новичок на форуме
Отправить личное сообщение для Paul12345 Посмотреть профиль Найти все сообщения от Paul12345
 
Регистрация: 25.02.2017
Сообщений: 9

Я наверно не правильно выразился, фон самого таба
Ответить с цитированием
  #27 (permalink)  
Старый 15.04.2017, 18:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,891

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>
Ответить с цитированием
  #28 (permalink)  
Старый 15.04.2017, 18:18
Новичок на форуме
Отправить личное сообщение для Paul12345 Посмотреть профиль Найти все сообщения от Paul12345
 
Регистрация: 25.02.2017
Сообщений: 9

Да, именно, спасибо огромное!!!
Ответить с цитированием
  #29 (permalink)  
Старый 07.07.2017, 10:18
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,891

открывашка и смена текста на кнопке
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>

Последний раз редактировалось рони, 07.07.2017 в 11:43.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не заменяется содержимое DIV по клику. Помогите разобраться. r4zoom Элементы интерфейса 4 04.09.2013 15:54
раскрывающийся и закрывающися текст при клику hardware jQuery 4 19.08.2013 15:16
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 01:41
Как переписать div по клику по нему Lewik Общие вопросы Javascript 3 08.05.2012 21:27
Изменение содержимого div по клику и передача данных POST Serious2008 Общие вопросы Javascript 3 13.11.2011 18:12