Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
4 / 4 / 0
Регистрация: 30.10.2016
Сообщений: 65

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

11.11.2016, 12:41. Показов 1115. Ответов 6
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
как заменить при нажатии на кнопку класс 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; }
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 11.11.2016, 12:41
Ответы с готовыми решениями:

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

Строка: Каждая буква в строке должна быть заменена на следующую в кодовой таблице
Написать код: Каждая буква заменена на следующую в кодовой таблице

Строка: Каждая буква в строке должна быть заменена на соответствующий номер кодовой таблицы
Написать код: Каждая буква заменена на соответствующий номер кодовой таблицы

6
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
11.11.2016, 14:03
А скрипты-то где?
1
4 / 4 / 0
Регистрация: 30.10.2016
Сообщений: 65
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 минуту
другие скрипты для распознания современных скриптов старыми браузерами
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
11.11.2016, 15:03
Ну поехали. У вас есть функция, заменяющая шапку сайта на 3 кнопки, которые в последствие станут нашей панелью. Вам следует сохранить где-нибудь разметку вашей шапки, чтобы можно было к ней вернуться по нажатию кнопки возврата. Объявите глобальную переменную и присвойте ей свойство innerHTML нашей шапки.
1
4 / 4 / 0
Регистрация: 30.10.2016
Сообщений: 65
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>
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
11.11.2016, 16:02
Цитата Сообщение от AnnaChapman Посмотреть сообщение
у меня только ид заменяются
Начинается... Что значит "только ид заменяются?"
1
4 / 4 / 0
Регистрация: 30.10.2016
Сообщений: 65
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 класс там будут стили для панели управления
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 12.11.2016, 13:00
Помогаю со студенческими работами здесь

При нажатии на кнопку одной формы, у меня должна выскочить вторая...как это написать в процедуре...
При нажатии на кнопку одной формы, у меня должна выскочить вторая...как это написать в процедуре??? очень нужно помогите

Форма поиска + :hover ,не работает при наведение на кнопку, как быть?
Как мне сделать, чтобы картинка кнопки была единым целым с оболочкой?? :( Никак не пойму, как сделать. Просто раньше никогда не делал на...

При нажатии на кнопку должна отображатся другая картинка ,при повторном нажатии снова первая картинка
На html языке отобразить картинку и кнопку.При нажатии на кнопку должна отображатся другая картинка ,при повторном нажатии снова первая...

Сделать, чтобы при нажатии на форме 2 на кнопку, форма 2 закрывалась, а форма 1 открывалась
Здравствуйте подскажите как обнулить форму. Вобщем у меня форма form1 как бы с тестом там есть ComboBox при помощи которого выбирается тема...

Как сделать что бы при нажатии на кнопку форма открывалась на весь экран?
Что как


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
 http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru