Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 19.05.2021
Сообщений: 174

Как после перезагрузки страницы остаться на той же вкладке js

23.10.2022, 18:18. Показов 657. Ответов 1

Студворк — интернет-сервис помощи студентам
Есть две вкладки содержимое которых создаётся при нажатии, и при нажатии на другую удаляется из дом узла. Контент вкладок вставляется в div на странице и при выборе другой вкладки удаляется. Попытался сделать так чтобы при перезагрузке страницы сохранялось содержимое diva с классом divAdd. Подскажите варианты правильной реализации?

js:

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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
window.addEventListener('DOMContentLoaded', function() {
  localStorage.setItem('currentTab', document.querySelectorAll('.divAdd div'));
});
 
localStorage.getItem('currentTab');
 
document.querySelector('.burger-menu__nav').addEventListener('click', event => {
  if (event.target.innerText.trim() === 'Buttons') {
    delElements();
    buttons();
  }
  if (event.target.innerText.trim() === 'Create table') {
    delElements();
    create_table_form();
  }
})
 
function delElements() {
  document.querySelectorAll('.divAdd div').forEach(function (a) {
    a.remove()
  })
}
function create_table_form() {
    let div_table = document.createElement('div');
    div_table.className = 'table_div';
    var addDiv = document.querySelector("div.divAdd");
    addDiv.appendChild(div_table);
 
    var h1 = document.createElement("h1");
    h1.innerText = "Table creation";
    div_table.appendChild(h1);
 
    let p_width = document.createElement("p");
    p_width.innerText = "Table width:";
    div_table.appendChild(p_width);
 
    let width_input = document.createElement("input");
    width_input.type = "text";
    width_input.id = "width";
    div_table.appendChild(width_input);
 
    let p_height = document.createElement("p");
    p_height.innerText = "Table height:";
    div_table.appendChild(p_height);
 
    let height_input = document.createElement("input");
    height_input.type = "text";
    height_input.id = "height";
    div_table.appendChild(height_input);
 
    let btn_crt_table = document.createElement("button");
    btn_crt_table.innerText = "Create Table";
    div_table.appendChild(btn_crt_table);
    btn_crt_table.addEventListener('click', (event) => {
        draw_table(width_input.value, height_input.value);
    });
 
    let sect = document.createElement('section');
    sect.id = "section";
    div_table.appendChild(sect);
}
function buttons() {
    let div_btns = document.createElement('div');
    div_btns.id = "btnss"
    div_btns.className = 'btns';
    var addDiv = document.querySelector("div.divAdd");
    addDiv.appendChild(div_btns);
 
    var h1 = document.createElement("H1");
    var t = document.createTextNode("Buttons");
    h1.appendChild(t);
    div_btns.appendChild(h1);
 
    let p_color = document.createElement("p");
    p_color.innerHTML = "Choose color: ";
    div_btns.appendChild(p_color);
 
    let inpt_color = document.createElement("input");
    inpt_color.id = 'idColor';
    inpt_color.setAttribute("type", "color");
    div_btns.appendChild(inpt_color);
 
    for (i = 0; i < 3; i++) {
        let btns = document.createElement("button");
        btns.className = "buttons";
        btns.innerHTML = "Click me :)";
        div_btns.appendChild(btns);
    }
}
html:

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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FRONT-END LAB</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
    <div class="wrapper">
        <header>
        </header>
        <main>
            <div class="burger-menu">
                <a href="#" class="burger-menu__button">
                    <span class="burger-menu__lines"></span>
                </a>
                <nav class="burger-menu__nav" id="burger-menu__nav">
                    <a href="#" class="burger-menu__link">Create table</a>
                    <a href="#" class="burger-menu__link">Buttons</a>
                </nav>
            </div>
        </main>
        <footer>
        </footer>
    </div>
    <div class="divAdd"></div>
</body>
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
23.10.2022, 18:18
Ответы с готовыми решениями:

Как остаться на выбранной вкладке после перезагрузки страницы
Всем привет! есть вот такой вот код табов &lt;div class=&quot;tabloid_navigation&quot; style=&quot;font-size: 11px;&quot;&gt; ...

как остаться на текущей странице после перезагрузки в окне браузера?
после того как установил данный гвард на роуты export default function (to, from, next) { if (store.getters.user) { ...

Открытие страницы в той же вкладке
прошу прощения за лузерность и возможно плохое описание того что мне нужно. нужен скрипт который при помещении на сайте позволял бы...

1
77 / 31 / 9
Регистрация: 02.03.2021
Сообщений: 198
24.10.2022, 00:32
можно попробовать через куки на сохранение сеанса, правда idk могут ли они сохранять дин-ие элементы...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
24.10.2022, 00:32
Помогаю со студенческими работами здесь

Остаться на текущем вапросе после обновления страницы
Поясните пожалуйста эти цитаты, я не могу в них понять как это реализовать. А суть моей проблемы такая. Мне вывелся...

После распечатки с браузера Google Chrome на той вкладке все ссылки перестают работать
После того как распечатывается документ с браузера, на той вкладке все ссылки перестают работать, в остальных вкладках все норм. Приходится...

Как оставить изменения после перезагрузки страницы
Добрый день! Такая задача есть Div который по щелчку меняет цвет на красный &lt;script src=&quot;js/jquery.min.js&quot;...

Как сохранить counter value на инпуте после перезагрузки страницы?
Как сделать что когда обновил страницу не потерялся валуе на инпуте &lt;div&gt; &lt;input type=&quot;button&quot; class=&quot;btn...

Как сохранить выделение в DropDownList после перезагрузки страницы
Если у дропдауна изменяем селектед, то после перезагрузки страницы все сбрасывается на дефолт в опере. В остальных все нормально. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru