Javascript.RU

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

Дисплэй к карусели
С наступающим, уважаемые.
Есть каруселька на materializecss такого вида:
<style>
все id кроме #first_h и #first_content{
display:none;
}

</style>

<div id="first_h3">one</div>
<div id="secondt_h3">one</div> 
<div id="third_h3">one</div> 
<div id="fourth_h3">one</div> 
<div id="fifth_h3">one</div>  

<div class="carousel">
    <a id="first" class="carousel-item" href="#one!"><img src="#"></a>
    <a id="second" class="carousel-item" href="#two!"><img src="#"></a>
    <a id="third" class="carousel-item" href="#three!"><img src="#"></a>
    <a id="fourth" class="carousel-item" href="#four!"><img src="#"></a>
    <a id="fifth" class="carousel-item" href="#five!"><img src="#"></a>
  </div>

<div id="first_content">one</div>
<div id="second_content">one</div> 
<div id="third_content">one</div> 
<div id="fourth_content">one</div> 
<div id="fifth_content">one</div>


Ну, так вот, как можно реализовать ,чтобы при нажатии каждого элемента в карусели отображались заголовок и контент соответствующий номеру id в карусели? Через onklick все работает у меня ,но это очень громоздко в html смотрится.
Можноли средствами js это сделать как подключаемый файл например?

И да, пользуясь случаем, хочу поздравить всех посетителей этого форума с новым годом и рождеством. Спасибо вам огромное, вы меня пару раз очень выручили. Удачи вам и добра, чтобы на благие дела и начинания хватало. Спасибо за внимание.
Ответить с цитированием
  #2 (permalink)  
Старый 31.12.2016, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

johnon,
<script>
    $(function() {
        $(".carousel").on("click", ".carousel-item", function(event) {
            event.preventDefault();
            var i = $(this).closest(".carousel-item").index();
            $(".h3").hide().eq(i).show();
            $(".content").hide().eq(i).show();
        }).find(".carousel-item").eq(0).click();
    });
</script>



<div class="h3">1</div>
        <div class="h3">2</div>
        <div class="h3">3</div>
        <div class="h3">4</div>
        <div class="h3">5</div>
        <div class="carousel">
          <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
          <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
          <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
          <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
          <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
        </div>
         <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
Ответить с цитированием
  #3 (permalink)  
Старый 31.12.2016, 22:28
Интересующийся
Отправить личное сообщение для johnon Посмотреть профиль Найти все сообщения от johnon
 
Регистрация: 24.11.2016
Сообщений: 11

Cпасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение размера карусели Liberbox Элементы интерфейса 2 17.10.2014 14:31
Отображение скрытого блока из карусели Kasper28 Элементы интерфейса 6 11.02.2014 16:40
jcarousel - Мгновенная остановка карусели. radogost jQuery 0 31.10.2012 18:08
Позиция элемента карусели Bogdan Элементы интерфейса 9 01.08.2012 11:11
Проблема скрипта карусели в firefox. Очень прошу помощи. -user21- jQuery 5 16.06.2010 13:38