Показать блок по нажатии на ссылку

@onderbert618 · Регистрация: 31.08.2014

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

Всем привет ребятки. Я долго использовал только HTML и CSS в верстке. И вот столкнулся с проблемой.
У нас есть 4 ссылки и 4 блока. По умолчанию все 4 блока скрыты

CSS
1
display: none

Надо сделать так что бы при нажатии на 1 ссылку показывало 1 блок

CSS
1
display: block

и так далее.
Условие таково при нажатии допустим ссылки 2 показывало 2 блок но остальные должны быть

CSS
1
display: none

Хотелось бы так же еще что бы браузер помнил какую ссылку пользователь нажал и при перезагрузке страницы показывал ее.
Сразу скажу в этом деле я новичок. Прочитал пару книг и только. Нужен ваш совет как лучше это все реализовать.
Пните пожалуйста в нужном направлении ) Буду вам очень благодарен.

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
<!-- Select device for help -->
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="#" id="toggler" class="item-smartphone">
                        <i class="icon-smartphone"></i>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="#" id="toggler" class="item-tablet">
                        <i class="icon-tablet"></i>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="#" id="toggler" class="item-laptop">
                        <i class="icon-laptop"></i>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="#" id="toggler" class="item-pc">
                        <i class="icon-pc"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="box" class="content-smartphone">
                        <p>Content1</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="box" class="content-tablet">
                        <p>Content2</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="box" class="content-laptop">
                        <p>Content3</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="box" class="content-pc">
                        <p>Content4</p>
                    </div>
                </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
/* --------- Import library style */
@import "bootstrap/bootstrap.css";      /* Load bootstrap style */
@import "icon/icon.css";            /* Load icon-font style */
 
/* --------- Reset default style */
a:hover,
a:active,
a:focus {
    text-decoration: none;
}
 
/* --------- Select device block */
a.item-smartphone,
a.item-tablet,
a.item-laptop,
a.item-pc {
    display: block;
    width: 100%;
    text-align: center;
    margin: 80px 0px 0px 0px;
    padding: 40px 40px;
    border-radius: 5px;
    background: #333333;
}
 
a.item-smartphone:hover,
a.item-tablet:hover,
a.item-laptop:hover,
a.item-pc:hover {
    background: #444444;
    transition: 0.6s;
}
 
a.item-smartphone:hover > .icon-smartphone:before,
a.item-tablet:hover > .icon-tablet:before,
a.item-laptop:hover > .icon-laptop:before,
a.item-pc:hover > .icon-pc:before {
    color: #0085E5;
    transition: 0.6s;
}
 
/* --------- Content device block */
#box {
    display: none;
}
 
.content-smartphone,
.content-tablet,
.content-laptop,
.content-pc {
    width: 100%;
    margin: 30px 0px 10px 0px;
    padding: 10px 10px;
    border-radius: 5px;
    border: 2px solid #333333;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload= function() {
    document.getElementById('toggler').onclick = function() {
        openbox('box', this);
        return false;
    };
};
 
function openbox(id, toggler) {
    var div = document.getElementById(id);
    if(div.style.display == 'block') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
}

@Fedor Vlasenko · 14.08.2017, 00:56

JavaScript
1
2
3
4
5
6
7
8
9
10
11
document.onclick = function(e) {
  var el = e ? e.target : window.event.srcElement,
    active = this.querySelector('.size'),
    elCls;
  while (el != this) {
    elCls = el.className;
    elCls == 'float' && (el.className += ' size') || elCls == 'float size' && (el.className = 'float');
    el = el.parentNode || el.parentElement;
  }
  active && (active.className = 'float');
};

Вариант, демо здесь

@onderbert618 · 14.08.2017, 02:04 **[ТС]**

Все бы хорошо но данный пример изменяет размер блока. Моя же задача состоит в следующем:
1. Есть 4 ссылки и 4 блока.
2. Нажимаем на ссылку 1 и показываем блок 1 но не должно показывать блок 2, блок 3, блок 4.
3. Нажимаем на ссылку 2 и показываем блок 2 но не должно показывать блок 1, блок 3, блок 4.
4. Нажимаем на ссылку 3 и показываем блок 3 но не должно показывать блок 1, блок 2, блок 4.
5. Нажимаем на ссылку 4 и показываем блок 4 но не должно показывать блок 1, блок 2, блок 3.
Все равно спасибо за помощь. Может подскажете что почитать что бы такое реализовать ?

Добавлено через 34 минуты
Пока что остановился на таком решении, может быть понадобиться.
Прошу строго не судить, если есть идеи как сделать лучше милости прошу, буду рад затестить ^^

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
<!-- Select device for help -->
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="#" id="span1" class="item-smartphone">
                        <i class="icon-smartphone"></i>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="#" id="span2" class="item-tablet">
                        <i class="icon-tablet"></i>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="#" id="span3" class="item-laptop">
                        <i class="icon-laptop"></i>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="#" id="span4" class="item-pc" href="#">
                        <i class="icon-pc"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="one" class="content-smartphone">
                        <p>Content1</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="two" class="content-tablet">
                        <p>Content2</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="three" class="content-laptop">
                        <p>Content3</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div id="four" class="content-pc">
                        <p>Content4</p>
                    </div>
                </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
/* --------- Select device block */
a.item-smartphone,
a.item-tablet,
a.item-laptop,
a.item-pc {
    display: block;
    width: 100%;
    text-align: center;
    margin: 80px 0px 0px 0px;
    padding: 40px 40px;
    border-radius: 5px;
    background: #333333;
}
 
a.item-smartphone:hover,
a.item-tablet:hover,
a.item-laptop:hover,
a.item-pc:hover {
    background: #444444;
    transition: 0.6s;
}
 
a.item-smartphone:hover > .icon-smartphone:before,
a.item-tablet:hover > .icon-tablet:before,
a.item-laptop:hover > .icon-laptop:before,
a.item-pc:hover > .icon-pc:before {
    color: #0085E5;
    transition: 0.6s;
}
 
/* --------- Content device block */
#one,
#two,
#three,
#four {
    display: none;
}
 
.content-smartphone,
.content-tablet,
.content-laptop,
.content-pc {
    width: 100%;
    margin: 30px 0px 10px 0px;
    padding: 10px 10px;
    border-radius: 5px;
    border: 2px solid #333333;
}

JavaScript
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
window.onload= function() {
    document.getElementById('span1').onclick = function() {
        document.getElementById('one').style.display = 'block'; 
        document.getElementById('two').style.display =  'none'; 
        document.getElementById('three').style.display =  'none';
        document.getElementById('four').style.display =  'none';
        return false;
    };
    document.getElementById('span2').onclick = function() {
        document.getElementById('one').style.display =  'none'; 
        document.getElementById('two').style.display =  'block'; 
        document.getElementById('three').style.display =  'none';
        document.getElementById('four').style.display =  'none';
        return false;
    };
    document.getElementById('span3').onclick = function() {
        document.getElementById('one').style.display =  'none'; 
        document.getElementById('two').style.display =  'none'; 
        document.getElementById('three').style.display =  'block';
        document.getElementById('four').style.display =  'none';
        return false;
    };
    document.getElementById('span4').onclick = function() {
        document.getElementById('one').style.display =  'none'; 
        document.getElementById('two').style.display =  'none'; 
        document.getElementById('three').style.display =  'none';
        document.getElementById('four').style.display =  'block';
        return false;
    };
};

@Fedor Vlasenko · 14.08.2017, 02:25

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var slides = document.querySelectorAll('.slide');
var contents = document.querySelectorAll('.bl-content');
document.onclick = function(e) {
  var el = e ? e.target : window.event.srcElement;
  if (el.className === 'slide') {
    for (var i = 0; i < slides.length; i++) {
      contents[i].style.display = el === slides[i] ? contents[i].style.display === 'block' ? 'none' : 'block' : 'none';
    }
    return false;
  }
};

Демо

Новые блоги и статьи Все статьи Все блоги /
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита, которое может. . .	Команды "Заполнить" и "Очистить" на форме документа Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". На примере нетипового документа разработанного в конфигурации КА2. В качестве источника данных указан регистр накопления, в который записываются данные о. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip