Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2018, 16:36
Интересующийся
Отправить личное сообщение для komned37 Посмотреть профиль Найти все сообщения от komned37
 
Регистрация: 23.07.2018
Сообщений: 18

вывод контента по принципу табов
Добрый день!

Есть разметка
<div class="container">
    <div class="item-box">
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
    <div class="item-box">
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="item-box">
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="item-box">
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
    ....
</div>

<div class="items-content">
    <div class="item-content">1</div>
    <div class="item-content">2</div>
    <div class="item-content">3</div>
    <div class="item-content">4</div>
    <div class="item-content">5</div>
    <div class="item-content">6</div>
    <div class="item-content">7</div>
    <div class="item-content">8</div>
    .....
</div>


По клику на item должен открываться соответствующий по порядковому номеру item-content
пишу код:
$(".item").click(function() {
  $(".item-content").hide().eq($(this).index()).fadeIn();
   
});


В этом случае выводятся только первый и второй контент, так как item заключен в бокс и его порядковый номер максимум 2.
Как сделать чтоб все работало нормально.
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2018, 16:46
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

для данного случая
$(".item-content").hide().eq( $(this).text() -1 ).fadeIn();


Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2018, 16:54
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

$(".item-content").hide().eq( $(this).index() + (($(this).parent().index()+1)*2)-2).fadeIn();
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2018, 17:06
Интересующийся
Отправить личное сообщение для komned37 Посмотреть профиль Найти все сообщения от komned37
 
Регистрация: 23.07.2018
Сообщений: 18

Первый вариант для меня не подходит, так как внутри блоков есть еще много других))))а вот второй вариант замечательный, все работает отлично. Огромное Вам спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2018, 17:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,081

... открывашка ... наверно №...
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2018, 17:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,081

j0hnik,
зачем так сложно?
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2018, 17:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

j0hnik,
смотри пост №1 и измени/поменяй два селектора
Ответить с цитированием
  #9 (permalink)  
Старый 23.07.2018, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,081

j0hnik,
что мешает найти нужный индекс сразу!!!
Ответить с цитированием
  #10 (permalink)  
Старый 23.07.2018, 17:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
родители
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод контента в модалном окне, чтобы к нему можно было обратиться по ссылке decadent42 jQuery 3 11.04.2016 15:12
Вывод контента masya jQuery 0 16.09.2015 16:47
Работа с таймерами после обновления контента paulsk Элементы интерфейса 3 03.04.2015 14:24
Вывод контента определенной части страницы Polsaimon AJAX и COMET 5 15.01.2014 15:53
Вывод переменных MasterHrust Javascript под браузер 4 03.08.2011 15:41