Сделать переключение блоков

@Fuzy · Регистрация: 18.11.2016

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

Как вот блок с коментами сделать чтоб переключать и т.д есть образцы?

Комментарий модератора

На каждый вопрос создавайте по одной теме! (Правила п.4.4)

@Evgeniy55 · 16.02.2017, 00:52

http://jqueryui.com/tabs/

Добавлено через 2 минуты
если без jquery, то суть такая

песочница: http://codepen.io/evgeniyproweb/pen/XjdJGR

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul class="gl_list">
  <li class="gl_item">
    <div class="news_block">
      <div class="news_input">
        <input id="tab_1" type="radio" name="tab" checked="checked"/>
        <label for="tab_1">Tab-1</label>
        <input id="tab_2" type="radio" name="tab"/>
        <label for="tab_2">Tab-2</label>
        <input id="tab_3" type="radio" name="tab"/>
        <label for="tab_3">Tab-3</label>
        <div class="news_content">
          <article class="tab_1">Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</article>
          <article class="tab_2">Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</article>
          <article class="tab_3">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.</article>
        </div>
      </div>
    </div>
  </li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
  background: #9d9d9d;
}
 
.news_block {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-top: 3em;
  margin-left: auto;
  margin-right: auto;
}
 
.news_input {
  display: inline-block;
 
  input {
    display: none;
 
    &:checked + label {
      background: red;
      color: #ffffff;
    }
  }
 
  input[id="tab_1"]:checked ~ .news_content .tab_1,
  input[id="tab_2"]:checked ~ .news_content .tab_2,
  input[id="tab_3"]:checked ~ .news_content .tab_3 {
    display: block;
  }
 
  label {
    padding: 0.6em 2.25em;
    margin-right: 0.5em;
    background: orange;
    color: black;
    cursor: pointer;
   }
}
 
.news_content {
  padding-top: 0.6em;
 
  article {
    display: none;
    padding: 2em;
    border-top: 5px solid red;
    border-radius: 0 5px 5px 5px;
    background: #fff;
  }
}

Добавлено через 4 минуты
П.С. только тут у меня в "em" некоторое указано, лучше или px или "rem", образец старый, лень переделывать

@Fuzy · 17.02.2017, 09:51 **[ТС]**

я вот сделал ну у меня не переключается почему-то

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="sidebar-alt">
    
 
 
 
    <div class="widget tabbertabs">
    <div class="tabberlive">
    <ul class="tabbernav">
    <li class="tabberactive"><a href="javascript:void(null);" title="Новини">Новини</a></li>
    <li class=""><a href="javascript:void(null);" title="Коментарі">Коментарі</a></li></ul>
    <div class="tabbertab feature-posts " title="">
    <h2 class="widgettitle">Новини</h2>
        <ul class="feature-posts-list">
        <li><a href="http://nslovo.com/blog/mizhrajonnyj-hokejnyj-turnir-vidbuvsya-u-meni">Міжрайонний хокейний турнір відбувся у Мені</a> <br><small>16.02.2017</small> <br><div class="clear"></div></li><li>
        <a href="http://nslovo.com/blog/nadzvychajnyj-stan-v-enerhetytsi-peredbacheni-hrafiky-vidklyuchen">Надзвичайний стан в енергетиці: передбачені графіки відключень</a> <br><small>16.02.2017</small> <br><div class="clear"></div></li><li><a href="http://nslovo.com/blog/yak-bronepotyah-vilna-ukrajina-viv-bij-za-makoshyne">Як бронепотяг “Вільна Україна” вів бій за Макошине</a> <br><small>16.02.2017</small> <br><div class="clear"></div></li><li><a href="http://nslovo.com/blog/u-verhovnij-radi-hochut-objednuvaty-hromady-bez-dobrovilnosti">У Верховній Раді хочуть об’єднувати громади вже без добровільності</a> <br><small>16.02.2017</small> <br><div class="clear"></div></li><li><a href="http://nslovo.com/blog/na-menschyni-vshanuvaly-uchasnykiv-bojovyh-dij-na-terytoriji-inshyh-derzhav">На Менщині вшанували учасників бойових дій на території інших держав</a> <br><small>16.02.2017</small> <br><div class="clear"></div></li></ul>
        <div class="clear"></div>
        </div>
        <div class="tabbertab recent-comments tabbertabhide" title="">
        <h2 class="widgettitle">Коментарі</h2>
        <ul class="recent-comments-list">
            <li>
                <a href="http://nslovo.com/blog/plastykovyj%e2%80%ad-%e2%80%aczoopark%e2%80%ad%e2%80%ac-u-dvori-dmytrenkiv-dyvuje%e2%80%ad-%e2%80%achostej-foto#comment-1149">Алекс Шуберт:</a> креативнинько,но слабенько...бут�…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/svyato-vodohreschi-na-menskomu-plyazhi-video#comment-1146">Major:</a> де живий  звук !??? :((…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/svyato-vodohreschi-na-menskomu-plyazhi-video#comment-1145">Major:</a> чсму нема живого звуку !??? :(((…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/19-sesiya-menskoji-miskrady#comment-1144">valiko:</a> мабуть і Цигипі показував дулю…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/19-sesiya-menskoji-miskrady#comment-1143">valiko:</a> Шановний автор, про Фесюна Ви ран…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/allo-politsiya-shvydko-syudy#comment-1141">vika:</a> Підскажіть, як здійснити виклик??…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/deputaty-rajonnoji-rady-u-2017-rotsi-otrymayut-po-30-tysyach-hryven#comment-1139">Сергій Трегубенко:</a> Олексію Прищепі - заголовок абсо�…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/pro-dobro-i-zlo-na-prykladi-komisiji-miskrady#comment-1138">Олексій Прищепа:</a> Чудово вплинув етичний кодекс на…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/deputaty-rajonnoji-rady-u-2017-rotsi-otrymayut-po-30-tysyach-hryven#comment-1137">Олексій Прищепа:</a> Трошки заголовочок бентежить. Ні…<div class="clear"></div>
            </li>
 
            
            <li>
                <a href="http://nslovo.com/blog/yak-domohtysya-svoho-i-ne%e2%80%ad-%e2%80%acpopasty%e2%80%ad%e2%80%ac-na-hroshi#comment-1136">Сергей Олексенко:</a> А що робити тим хто вже так би мов…<div class="clear"></div>
            </li>
 
        </ul></div>
        <div class="clear"></div></div></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
        .sidebar-alt {
    display: table-cell;
    width: 200px;
    padding:0;
}
 
        #sidebar > div:last-child,
        .sidebar-alt > div:last-child {
            margin: 0;
            padding: 0;
        }
        #sidebar {
            float: right;
            width: 340px;
            padding: 0;
        }
        .tabbertabs { border: none !important; box-shadow:none; background: none;}
        ul.tabbernav { background:#EEF1F3; display:block; list-style: none; margin:2px 0 0; padding:6px 0; }
ul.tabbernav li:first-child { border-left:1px solid #D9E0E6; -webkit-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;}
ul.tabbernav li:last-child {border-right-style:solid; -webkit-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; }
ul.tabbernav li { background: #FCFCFC; border-right: 1px dotted #D9E0E6; border-top: 1px solid #D9E0E6; display: inline;  overflow:hidden; padding:8px 10px; position:relative; }
ul.tabbernav li a { text-decoration: none;  color:#333; }
ul.tabbernav li.tabberactive { border-color:#33536A; background: #33536A;  }
ul.tabbernav li.tabberactive a { color: #fff; }
.tabberlive .tabbertabhide { display: none; }
.tabberlive .tabbertab {
    padding: 20px;
    background: #FCFCFC;
    border:1px solid #D9E0E6;
    -webkit-box-shadow: rgba(74, 95, 116, 0.08) 0 1px 3px;
    -moz-box-shadow: rgba( 74, 95, 116, .08 ) 0 1px 3px;
    box-shadow: rgba(74, 95, 116, 0.08) 0 1px 3px;
 }
.tabbertab h2.widgettitle { display: none; }
.tabberlive h3 { display: none; }
.featured-post {
    width: 240px;
    float: left;
    margin: 0 10px 10px 0;
    padding: 10px;
    font-size: 11px;
    background: #FCFCFC;
    color:#A1A9AF;
    border:1px solid #D9E0E6;
    -webkit-box-shadow: rgba(74, 95, 116, 0.08) 0 1px 3px;
    -moz-box-shadow: rgba( 74, 95, 116, .08 ) 0 1px 3px;
    box-shadow: rgba(74, 95, 116, 0.08) 0 1px 3px;}
 
.widget .feature-posts-list br {display: none;}
.widget .feature-posts-list img { margin: 0 10px 10px 0; float: left; -webkit-border-radius: 2px; border-radius: 2px;}
.widget .feature-posts-list small { font-size: 12px;  margin: 2px 0 4px; display: block; color:#A1A9AF; }
.widget .feature-posts-list .post-excerpt { display: block;}
.widget .feature-posts-list li { padding:0; margin:0 0 20px; }
.widget .feature-posts-list li:last-child { margin:0; }
.recent-comments-list .avatar { margin-right: 10px; float: left; -webkit-border-radius: 2px; border-radius: 2px; }
.recent-comments-list li { margin:0 0 10px; font-size: 12px; }
.recent-comments-list li:last-child { margin:0; }

@Vlad03 · 17.02.2017, 10:18

Если подключён jQuery то делайте на нём, меньше проблем будет.

@Fuzy · 17.02.2017, 10:22 **[ТС]**

Он не подключен и я его не знаю

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .

@Vlad03 112 / 108 / 42 Регистрация: 22.01.2017 Сообщений: 452
	17.02.2017, 10:18
	Если подключён jQuery то делайте на нём, меньше проблем будет. 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	17.02.2017, 10:22 [ТС]
	Он не подключен и я его не знаю 0