Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
GregoryGrinch
0 / 0 / 0
Регистрация: 12.12.2015
Сообщений: 33
1

Как отобразить скрытые элементы HTML(css-display:none;) используя JS!(display:block;)

13.03.2016, 14:25. Просмотров 1684. Ответов 3
Метки нет (Все метки)

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>AdBanner</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
            
    <header></header>
    <div class="container">
       
        
        <div class="radio col-md-4 ">
            <h4>Кол-во баннеров</h4> 
            <hr>   
            <label><input type="radio" name="optradio" id="b1" checked>Image Banner 1</label>
            <br>
            <label><input type="radio" name="optradio" id="b2" >Image Banner 2</label>
            <br>
            <label><input type="radio"  name="optradio"  id="b3" >Image Banner 3</label>
            <br>
            <label><input type="radio" name="optradio"  id="b4" >Image Banner 4</label>
        </div>    
        
        <div class="col-md-4">
            <h4>Картинки</h4>
            <hr>
            <p id="img_0">Logo<input type="file" id="logo"></p>
            <p id="img_1">Image 1<input type="file"></p>
            <p id="img_2">Image 2<input type="file"></p>
            <p id="img_3">Image 3<input type="file"></p>
            <p id="img_4">Image 4<input type="file"></p>
        </div>
        
        <div class="col-md-4">
            <h4>Тексты объявлений</h4>
            <hr>
            <input type="text" id="txt_1" placeholder="Text 1">
            <input type="text" id="txt_2" placeholder="Text 2">
            <input type="text" id="txt_3" placeholder="Text 3">
            <input type="text" id="txt_4" placeholder="Text 4">  
        </div>
 
        <div class="col-md-12">
            <iframe src=""  frameborder="1" style="width:700px; height: 240px; margin-top: 30px;" id="preview"></iframe>
        </div>
    </div>
    
    <footer></footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#txt_1,#txt_2,#txt_3,#txt_4{
    margin-top: 20px;
    width: 400px;
    height: 30px;
}
#txt_2,#txt_3,#txt_4,
#img_2,#img_3,#img_4{
    display: none;
}
.col-md-12 {
    margin-top: 50px;
}
hr { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
Мне нужно отобразить скрытые элементы по очереди при нажатии на radiobatton#b2 отобразились элементы img_2 и txt_2, и тд.
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.03.2016, 14:25
Ответы с готовыми решениями:

Замена display:none; на display:block; при нажатии
Приветствую всех! Мои познания в JavaScript очень слабы, поэтому буду благодарен за любую помощь....

display block display none onclick
когда я нажимаю на слово hello, с низу появляются новые слова. Я хочу, чтоб когда нажимать на слове...

Реализация el.style.display='block'; el.style.display='none';
Как реализовать следующие процедуры в указанных браузерах? el.style.display='block';...

Не работает display: block;
Возникла проблема, хочу сделать на странице выбор базы данных (объект селект в диве) кнопками (две...

display block для определенных id
Есть форма с селектом. В нем выводятся option в таком виде: &lt;option id=&quot;sec_4_cat_10&quot;...

3
HarizZ
10 / 10 / 10
Регистрация: 23.07.2015
Сообщений: 55
13.03.2016, 15:33 2
Возможно вам поможет:
Javascript
1
2
3
function toggle(el) {
  el.style.display = (el.style.display == 'none') ? 'block' : 'none'
}
0
newJS
Эксперт JSЭксперт HTML/CSS
2402 / 1078 / 307
Регистрация: 23.06.2011
Сообщений: 3,363
14.03.2016, 07:58 3
Суда по коду, у элементов изначально нет стилей, а значит нужно ещё и пустую строку проверять, а то криво будет работать.
0
GregoryGrinch
0 / 0 / 0
Регистрация: 12.12.2015
Сообщений: 33
14.03.2016, 10:16  [ТС] 4
Все уже сделал, но только с помощью checkbox.
Javascript
1
2
3
4
5
6
7
8
function showOrHide(ch, img, txt) {
    ch = document.getElementById(ch);
    img = document.getElementById(img);
    txt = document.getElementById(txt);
    if (ch.checked) img.style.display = "block",txt.style.display="block";
    
    else img.style.display = "none",txt.style.display = "none";
  }
0
14.03.2016, 10:16
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.03.2016, 10:16

Не работает display: block под IE
Собственно вот код: &lt;style&gt; .sdan{ display:none; } &lt;/style&gt; &lt;form action=&quot;index.php&quot;...

Display: block; по клику на другом div
Первый опыт js, пока очень плохо разбираюсь. Не могу понять в чём допустил ошибку. Попробовал...

Display: block при нажатии на ссылку
Добрый вечер, подскажите пожалуйста, есть скрипт который показывает блок при нажатии на ссылку var...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.