При клике менять контент (текст)

@sendxt · Регистрация: 25.04.2012

Студворк — интернет-сервис помощи студентам

Добрый, подскажите как такое сделать как на картинке...

Круглешки это кнопки, по клику на какую-та чтоб подгружался контент соответсвующий, как контент этот оформить? лучше всё прятать только выбранный меня класс с hidden?

Либо как вариант чтобы прокручивал каждый интервал времени контент.

сейчас разметка этого так выглядит..

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="rewiev-right">
                    <p>Į grožio studiją Divalta skubu pasisemti naujų jėgų, geros nuotaikos, šviežių emocijų. Čia pasiilsių.. Puikios merginos, nerealios spe******tės, tikros "profės"!  Ačiu! Gyvenkite ilgai, turėkite jūs mylinčius ir pas jūs skubančius klientus.</p> 
                
                    <div class="testimonial-pager">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#">6</a>
                        <cite>- Inga Bunkiene</cite>
                    </div>
 
                </div>

mihalken · 02.06.2014, 13:38

JavaScript
1
2
3
4
5
6
$( '.testimonial-pager a' ).on('click', function() {
   $('.rewiev-right p').slideUp();
   $('.rewiev-right p[page="' + $(this).text() + '"]').slideDown();
 
   return false;
});

HTML5
1
2
3
4
5
6
7
8
<div class="rewiev-right">
    <p page="1">page 1</p>
    <p page="2">page 2</p>
    <!-- ...Page N... -->
    <div class="testimonial-pager">
     <a href="#">1</a>
     <a href="#">2</a>
    </div>

?

@sendxt · 02.06.2014, 14:12 **[ТС]**

mihalken, чёт не работает, надо ещё чтоб виден был только первый (один)

mihalken · 02.06.2014, 14:24

JavaScript
1
2
3
4
5
6
$( '.testimonial-pager a' ).on('click', function() {
     $('.rewiev-right p').fadeOut('fast');
     $('.rewiev-right p[page="' + $(this).text() + '"]').fadeIn('fast');
 
     return false;
});

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="rewiev-right">
    <p page="1">page 1</p>
    <p page="2" style="display: none; ">page 2</p>
    <p page="3" style="display: none; ">page 3</p>
    <!-- ...Page N... -->
 
    <div class="testimonial-pager">
         <a href="#">1</a>
         <a href="#">2</a>
         <a href="#">3</a>
    </div>
</div>

http://jsfiddle.net/rJJf6/

?

Добавлено через 1 минуту
Версия 2 (без всяких анимаций)

@sendxt · 02.06.2014, 19:59 **[ТС]**

mihalken, как сделать при таком варианте, что после события на верх страницы не перебрасывало?

JavaScript
1
2
3
 $( '.testimonial-pager a' ).on('click', function() {
       $('.rewiev-right p').css('display','none');
       $('.rewiev-right p[page="' + $(this).text() + '"]').fadeIn('display', 'block');

Добавлено через 9 минут
заработало

mihalken · 03.06.2014, 11:12

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

после события на верх страницы не перебрасывало

Обычно делаю так

HTML5
1
<a href="javascript://">link</a>

и в обработчике return false;

Не знаю как сейчас по современному делают. Осталась привычка и все.

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,163
	02.06.2014, 14:12 [ТС]
	mihalken, чёт не работает, надо ещё чтоб виден был только первый (один) 0

При клике менять контент (текст)

Решение