как заменить при нажатии на кнопку класс header( поисковая форма из данного класса должна быть заменена) на па

@AnnaChapman · Регистрация: 30.10.2016

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

как заменить при нажатии на кнопку класс header( поисковая форма из данного класса должна быть заменена) на панель управления с помощью которой можно управлять стилями текущей страницы с возможностью сохранения настроек для текущего пользователя, в панели управления должна быть кнопка позволяющая вернуться к версии без панели управления с обычными стилями ?

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
     <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Адаптивный шаблон</title>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию-->
        <link rel="stylesheet" type="text/css" href="css/style.css" /><!-- стили -->
        <script src="js/es5-shim.js" defer> </script>   <!-- Данный скрипт ведряет в старые браузеры технологию ES5. defer- Поддерживается всеми браузерами, включая самые старые IE.Скрипт выполняется асинхронно, не заставляет ждать страницу  браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.-->
        <script src="js/es5-sham.js" defer> </script>   <!-- Данный скрипт ведряет в старые браузеры технологию ES5. defer- Поддерживается всеми браузерами, включая самые старые IE.Скрипт выполняется асинхронно, не заставляет ждать страницу  браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.-->
        <script src="js/glass.js" async> </script>   <!-- скрипты async- Скрипт выполняется полностью асинхронно. То есть, при обнаружении <script async src="..."> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.Поддерживается всеми браузерами, кроме IE9-.-->
 
    </head>
    <!-- END -->
    
    <body>
    <!-- А здесь надо размещать все, что хочется увидеть на странице. -->
        <div class="container"><!--контейнер для содержимого всей страницы -->
                <div class="header"><!-- шапка-->
 
                    <div class='search'> <!-- форма поиска-->
                        <form> 
                            <span><input type="text" id='search_square'><input type="button" id='search_buttom' value="Искать"></span>
                         </form>
                    </div>
 
                    <div id="btn">
                        <a href ='' onclick = 'change(); return false;'>кнопка</a><!--  onclick -возникает при щелчке левой кнопкой мыши на элементе change();-событие изменения формы;  href =''- чтобы скрипт исполнялся из подключаемого файла-->
                    </div>
                </div>
            <div class="content_bar"><!--контейнер для колонок и контента -->
                <div class="left_bar">
                    <div id=menu>
                    <h1>МЕНЮ</h1>
                        <ul>
                            <li><a href="#">1</a>
                                <ul>
                                    <li><a href="#">1.1</a></li>
                                    <li><a href="#">1.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">2</a>
                                <ul>
                                    <li><a href="#">2.1</a></li>
                                    <li><a href="#">2.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">3</a>
                                <ul>
                                    <li><a href="#">3.1</a></li>
                                    <li><a href="#">3.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">4</a>
                                <ul>
                                    <li><a href="#">4.1</a></li>
                                    <li><a href="#">4.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">5</a>
                                <ul>
                                    <li><a href="#">5.1</a></li>
                                    <li><a href="#">5.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">6</a>
                                <ul>
                                    <li><a href="#">6.1</a></li>
                                    <li><a href="#">6.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">7</a>
                                <ul>
                                    <li><a href="#">7.1</a></li>
                                    <li><a href="#">7.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">8</a>
                                <ul>
                                    <li><a href="#">8.1</a></li>
                                    <li><a href="#">8.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">9</a>
                                <ul>
                                    <li><a href="#">9.1</a></li>
                                    <li><a href="#">9.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">10</a>
                                <ul>
                                    <li><a href="#">10.1</a></li>
                                    <li><a href="#">10.2</a></li>
                                </ul>
                            </li>
                        </ul>   
                </div>
                    <div id="archive">
                            <h1>АРХИВ</h1>
                        <ul>
                            <li><a href="">Ссылка - 1</a></li>
                            <li><a href="">Ссылка - 2</a></li>
                            <li><a href="">Ссылка - 3</a></li>
                            <li><a href="">Ссылка - 4</a></li>
                            <li><a href="">Ссылка - 5</a></li>
                            <li><a href="">Ссылка - 6</a></li>
                            <li><a href="">Ссылка - 7</a></li>
                        </ul>
                        <h3><a href="#">Далее >></a></h3>
                    </div>
            </div>
                <div class="content_center">
                    <div class="text"><!-- информация-->
    Ваш шедевр готов!
Задача организации, в особенности же консультация с широким активом представляет собой интересный эксперимент проверки новых предложений. Разнообразный и богатый опыт новая модель организационной деятельности в значительной степени обуславливает создание форм развития. С другой стороны дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Идейные соображения высшего порядка, а также постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание систем массового участия. Равным образом укрепление и развитие структуры позволяет выполнять важные задания по разработке систем массового участия. Равным образом консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.
 
Товарищи! дальнейшее развитие различных форм деятельности позволяет оценить значение модели развития. Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации позиций, занимаемых участниками в отношении поставленных задач. Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач. Разнообразный и богатый опыт дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития.
 
Товарищи! сложившаяся структура организации позволяет оценить значение соответствующий условий активизации. Повседневная практика показывает, что новая модель организационной деятельности способствует подготовки и реализации новых предложений. Не следует, однако забывать, что реализация намеченных плановых заданий требуют от нас анализа дальнейших направлений развития. Повседневная практика показывает, что консультация с широким активом представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям.
 
Не следует, однако забывать, что начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации систем массового участия. Таким образом рамки и место обучения кадров требуют от нас анализа модели развития. Разнообразный и богатый опыт реализация намеченных плановых заданий позволяет выполнять важные задания по разработке модели развития. Разнообразный и богатый опыт сложившаяся структура организации требуют определения и уточнения соответствующий условий активизации.
 
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки направлений прогрессивного развития. Товарищи! реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям. Товарищи! начало повседневной работы по формированию позиции в значительной степени обуславливает создание новых предложений. Таким образом дальнейшее развитие различных форм деятельности представляет собой интересный эксперимент проверки дальнейших направлений развития. Задача организации, в особенности же начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке модели развития. Задача организации, в особенности же рамки и место обучения кадров влечет за собой процесс внедрения и модернизации форм развития.
                    </div>                      
                    <div id='news'><!-- новости -->
                     <h3>Новости и Объявления</h3>
 
                    </div>          
                </div>
            </div>
            <div class="footer">
            fg
            
            </div>
<!-- конец блока контейнер  -->
    </div>
    </body>
    <!-- END -->
</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
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
    html, body{width: 100%; height: 100%; position:relative; }
*{box-sizing:border-box; margin: 0; padding: 0;} /*позволяет изменить  алгоритм css, чтобы свойства width и height задавали размеры не контента, а размеры блока.*/
    body
    {   
        font-family: Arial, Helvetica, sans-serif; 
        text-align: center;
        line-height: 1.5em;
        background:#A9A9A9;
    }
 
    .container{background:#fff; width:1000px; margin:0 auto;  padding:10px; clear:both; min-height:100%;   /* Ширина блока с полями */
        box-shadow:0px 0px 20px #999;
       -moz-box-shadow:0px 0px 20px #999;
       -webkit-box-shadow:0px 0px 20px #999;
       -o-box-shadow:0px 0px 20px #999;
 
        }   
    .header{background:url(../img/logo.png); background-size: width:980px; height:190px; no-repeat;}/*".."Путь означает что нужно подняться в родительский каталог, зайти в папку img и найти файл */
        .search{float:left;margin-top: 160px; margin-left:15px;}
            #search_square{border-radius:0px 10px 0px 10px; height:20px; }
            #search_buttom{ margin-left:2px; padding-left:2px;  height:20px; border-radius:4px; }
        #btn{ float:right; margin-top: 155px;margin-right: 15px; border-radius: 10px; height: 30px; width:200px;background:#fff; border:1px black; padding-right:2px;padding-left:2px; font-size:14px; padding-top:2px;}
            #btn:hover{ background:#DCDCDC;}
                #btn a{ text-decoration:none; color:#000;}
    .content_bar{ display:table;width:100%; min-height:100%; clear:both; position:relative;}
            #news{}
                #news h3{color:#000080; padding: 20px 20px; }
        .left_bar{width:200px; background:#fff0a5;  margin-top:10px; height:100%; float: left; display:table-cell; position:absolute; text-transform:capitalize;/*Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.*/}              
            #menu { text-align:left;  clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ width:100%;/*ширина меню*/}
                #menu h1{padding-top:10px;padding-left:10px;color:#e2760a;}
                    #menu ul {display:block;width:100%;height:auto;margin:0px;padding:0px;list-style:none;position:relative; border-bottom:1px solid #fed11c;  margin-top:10px;}
                        #menu ul li{display:block; width:100%; height:auto; position:relative;}
                            #menu ul li a{  
                                    position:relative; 
                                    display:block;
                                    width:100%;
                                    height:auto;
                                    box-sizing:border-box;
                                    font-size:13px;
                                    font-weight:bold;
                                    color:#e2760a;
                                    line-height:1.2em;
                                    padding:10px 15px;
                                    border-top:1px solid #fed11c;
                                    text-decoration:none;}
                                #menu ul li a:hover, #menu ul li:hover a{ color:#0A3CC1; }
                                        #menu  ul li ul { 
                                            /*position:absolute; если надо получить в правую сторону выпадающий список либо в левую раскомментировать */
                                            top:0px;
                                            left:0; /*100%  получаем в левую сторону*/
                                            display:none;
                                            width:auto}
                                            /*******показываем выпадающее меню при наведении ********/
                                            #menu ul li:hover ul{display:block;}  
                                                #menu ul li:hover ul:last-child{border:none;}          
                                                    #menu ul li ul li a { white-space:nowrap;text-transform:none;padding:5px 15px; background:#fff0a5; color:#e2760a!important;} /* !importantt позволяет повысить приоритет стиля*/
                                                        #menu ul li ul li a:hover{color:#0A3CC1!important;} 
            #archive{ text-align:left; clear:both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ width:100%;/*ширина меню*/}
                #archive h1{padding:10px 10px; color:#e2760a;}
                    #archive ul{display:block;width:100%;height:auto;margin:0px;padding:0px;list-style:none;position:relative;  margin-top:10px;}
                        #archive ul li{display:block; width:100%; height:auto; position:relative;}
                            #archive ul li a{
                                    position:relative; 
                                    display:block;
                                    width:100%;
                                    height:auto;
                                    box-sizing:border-box;
                                    font-size:13px;
                                    font-weight:bold;
                                    color:#e2760a;
                                    line-height:1.2em;
                                    padding:10px 15px;
                                    text-decoration:none;
                                }
                            #archive ul li a:hover, #archive ul li:hover a{ color:#0A3CC1; }
                #archive h3{ font-size:13px; float: right; padding-right: 60px;}
                #archive h3 a{text-decoration: none;text-transform:capitalize; color:#e2760a;}
                #archive h3 a:hover{text-decoration:underline; color:#0A3CC1;}
    .content_center{ margin-top:10px; width:770px; background:#fff;  height:100%; float:left;  display:table-cell; margin-left:210px; padding-right:10px;}
    
    .footer{background:url(../img/1.png); width: 980px; height:100px; repeat-x; clear:both; position: relative; }

@Balanaar · 11.11.2016, 14:03

А скрипты-то где?

@AnnaChapman · 11.11.2016, 14:45 **[ТС]**

glass.js

JavaScript
1
2
3
4
5
6
function change()
{
  var header = document.getElementsByClassName('header');
  
  header[0].innerHTML = '<input type="button" value="теперь"><input type="button" value="тут"><input type="button" value="кнопки">'; /* Свойство innerHTML устанавливает или получает всю разметку и содержание внутри данного элемента Оно позволяет получить HTML-содержимое элемента в виде строки. В innerHTML можно и читать и писать.[0] Чтобы получить нужный элемент из массива – указывается его номер в квадратных скобках:*/
}

Добавлено через 1 минуту
другие скрипты для распознания современных скриптов старыми браузерами

@Balanaar · 11.11.2016, 15:03

Ну поехали. У вас есть функция, заменяющая шапку сайта на 3 кнопки, которые в последствие станут нашей панелью. Вам следует сохранить где-нибудь разметку вашей шапки, чтобы можно было к ней вернуться по нажатию кнопки возврата. Объявите глобальную переменную и присвойте ей свойство innerHTML нашей шапки.

@AnnaChapman · 11.11.2016, 15:53 **[ТС]**

у меня только ид заменяются, сама шапка и классы остаются нетронутыми те нормально не работает

Добавлено через 27 секунд
вызвать документ с шапкой?

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
                <div class="header"><!-- шапка-->
 
                    <div class='search'> <!-- форма поиска-->
                        <form> 
                            <span><input type="text" id='search_square'><input type="button" id='search_buttom' value="Искать"></span>
                         </form>
                    </div>
 
                    <div id="btn">
                        <a href ='' onclick = 'change(); return false;'>кнопка</a><!--  onclick -возникает при щелчке левой кнопкой мыши на элементе change();-событие изменения формы;  href =''- чтобы скрипт исполнялся из подключаемого файла-->
                    </div>
                </div>

@Balanaar · 11.11.2016, 16:02

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

у меня только ид заменяются

Начинается... Что значит "только ид заменяются?"

@AnnaChapman · 12.11.2016, 13:00 **[ТС]**

только те дивы и кнопки которые через id объявлены

Добавлено через 3 минуты
почему и думаю что нужно копию документа создавать и вместо шапки панель управления хотя не уверена

Добавлено через 1 минуту
обидно что вы даже не смотрели сам код хотя все его попросили и поисковую форму из хедера нужно сохранить в панели

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

JavaScript
1
2
3
4
5
6
7
8
9
"use strict"
function change()
{
    var global = window || this;
            global.header = 1;
        var header = document.getElementsByClassName('header');
  
  header[0].innerHTML = '<input type="button" value="теперь"><input type="button" value="тут"><input type="button" value="кнопки">'; /* Свойство innerHTML устанавливает или получает всю разметку и содержание внутри данного элемента Оно позволяет получить HTML-содержимое элемента в виде строки. В innerHTML можно и читать и писать.[0] Чтобы получить нужный элемент из массива – указывается его номер в квадратных скобках:*/
}

Добавлено через 1 час 24 минуты
navbar класс под панель управления будет

Добавлено через 18 часов 31 минуту
жду

Добавлено через 6 минут
у меня шапка не исчезает лишь кнопка исчезает и строка поиска , создала navbar класс там будут стили для панели управления

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	11.11.2016, 14:03
	А скрипты-то где? 1

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	11.11.2016, 15:03
	Ну поехали. У вас есть функция, заменяющая шапку сайта на 3 кнопки, которые в последствие станут нашей панелью. Вам следует сохранить где-нибудь разметку вашей шапки, чтобы можно было к ней вернуться по нажатию кнопки возврата. Объявите глобальную переменную и присвойте ей свойство innerHTML нашей шапки. 1