Закрытие блока по клику

@benny · Регистрация: 24.05.2014

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

Подскажи, плз, как доделать код. Надо чтобы при нажатии на блок Закрыть, закрывалось окно. Вот код:

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
<!DOCTYPE html">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>111</title>
</head>
 
<body>
    <div id="wrap">
    <div style="padding-top:50px;">
    <div class="tab_content" id="tab_content1">
    <div class="close">Закрыть</div>
       <p>111111</p>
     </div>
     <div class="tab_content" id="tab_content2">
     <div class="close">Закрыть</div>
       <p>2222222</p>
     </div>
     <div class="tab_content" id="tab_content3">
     <div class="close">Закрыть</div>
       <p>333</p>
     </div>
     <div class="tab_content" id="tab_content4">
     <div class="close">Закрыть</div>
       <p>44444</p>
     </div>
     </div>
        
    </div>
    <div class="bottom">
        <ul>
        <li id="tab1" class="tab" onClick="funcTab(1)">11</li>
        <li id="tab2" class="tab" onClick="funcTab(2)">11</li>
        <li id="tab3" class="tab" onClick="funcTab(3)">11</li>
        <li id="tab4" class="tab" onClick="funcTab(4)">11</li>
        </ul>
    </div>
    
 
<script type="text/javascript">
function funcTab(n) {
   var NTab = document.getElementsByClassName('tab').length;
  for (var i=1; i < NTab+1; i++) {
    if (i != n){
     document.getElementById('tab'+i).className = 'tab';
     document.getElementById('tab_content'+i).className = 'tab_content'
     }
  }
   document.getElementById('tab'+n).className = 'tab active';
   document.getElementById('tab_content'+n).className = 'tab_content active';
}
 
</script>
</body>
 
</html>

и css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
* {margin:0px; padding:0px;}
body {background:gray;}
#wrap {width:1200px; margin: 0 auto;outline:0px solid red;min-height:500px;}
.top {min-height:300px;}
.bottom {min-height:200px;outline:0px solid red;width:100%;}
.bottom ul {}
.bottom ul li {display: block;  float: left; height: 100px;margin-left: 10px;    margin-top: 10px;outline: 0px solid black;width: 100px;background: none repeat scroll 0 0 white; border-radius: 8px;}
.bottom ul li:hover {box-shadow: 0 0 7px black;}
.tab_content{display:none;}
.tab_content.active{display:block;width:600px;background:#e7e7e7;margin: 0px auto;padding:20px;border:8px solid white;border-radius:10px;       min-height: 350px;box-shadow: 0 0 7px black;}
.tab.active {box-shadow: 0 0 7px black;}
.close {background: none repeat scroll 0 0 white;border-radius: 26px;color: black;font-family: Verdana; font-size: 16px; margin-left: 644px; overflow: hidden; padding: 5px; position: absolute; text-align: center; top: 49px; width: 86px;}

@Thisman · 09.08.2014, 16:46

benny,

JavaScript
1
2
3
4
5
//коли вызываешь функцию через тег , то и будем от этого плясать
function funcTab(n) {
     var closeTab = document.getElementById("tab_content" + n);
     closeTab.style.display = "none" // либо делаешь то что хочешь, у нас есть DOM объект, который будем закрывать
}

Добавлено через 5 минут
benny, но что бы не маяться ( если будет очень много ссылок )

JavaScript
1
2
3
4
5
6
7
8
9
10
11
(function FuncTab () {
     var tabs = document.getElementsByClassName("tabs");
     for(var i=0;i<tabs.length;i++) {
          tabs[i].onclick = (function (id) {
                return function () {
                      var closeTab = document.getElementById("tab_content" + id);
                      closeTab.style.display = "none"
                }
          })(i)
     }
})() // в лучших традициях замыканий и самовызывающихся функций

Добавлено через 45 секунд
и тогда можешь из ссылок убрать атрибут onclick

@benny · 09.08.2014, 17:49 **[ТС]**

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
(function FuncTab () {
 var tabs = document.getElementsByClassName("tabs");
 for(var i=0;i<tabs.length;i++) {
 tabs[i].onclick = (function (id) {
 return function () {
 var closeTab = document.getElementById("tab_content" + id);
 closeTab.style.display = "none"
 }
 })(i)
 }
})() // в лучших традициях замыканий и самовызывающихся функций

Не работает этот код...
С первым способом у меня тоже как-то не вышло...

@Eva Rosalene · 09.08.2014, 18:11

Не по теме:

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

в лучших традициях замыканий и самовызывающихся функций

Уронил скупую мужскую слезу :)

@Thisman · 09.08.2014, 21:46

benny, посмотри в консоль разработчика, f12 в хроме, какие-то есть ошибки

Добавлено через 15 минут
benny, так, окей, поясни, что именно должно закрываться. У меня складывается чувство, что я не совсем правильно тебя понял

Добавлено через 10 минут
benny, в девятой строке:

JavaScript
1
})(i)

сделай

JavaScript
1
})(i + 1)

Нумерация идет с нуля, а у тебя первый элемент 1, в этом может быть проблема. Про то, что нужно закрывать необходимо уточнить, ибо скрипт присваивает блоку tab_contentN свойство display none, только оно уже прописано в css оО

@benny · 10.08.2014, 04:09 **[ТС]**

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

benny, так, окей, поясни, что именно должно закрываться. У меня складывается чувство, что я не совсем правильно тебя понял

при нажатии на <div class="close">Закрыть</div> должен закрываться блок с классом tab_content active

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

<div style="padding-top:50px;"> <div id="tab_content1" class="tab_content active"> <div class="close">Закрыть</div> <p>111111</p> </div> <div class="tab_content" id="tab_content2"> <div class="close">Закрыть</div> <p>2222222</p> </div> <div class="tab_content" id="tab_content3"> <div class="close">Закрыть</div> <p>333</p> </div> <div class="tab_content" id="tab_content4"> <div class="close">Закрыть</div> <p>44444</p> </div>

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

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

Нумерация идет с нуля, а у тебя первый элемент 1, в этом может быть проблема. Про то, что нужно закрывать необходимо уточнить, ибо скрипт присваивает блоку tab_contentN свойство display none, только оно уже прописано в css оО

tab_content в стилях уже со значение display:none, а при нажатии на один из элементов li, нужный блок становится видимым, т.е. класс tab_content меняется на tab_content active

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

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника 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 существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения 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. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/