05.06.2018, 08:53
|
|
Новичок на форуме
|
|
Регистрация: 05.06.2018
Сообщений: 2
|
|
|
функция показать/скрыть
Уважаемые программисты! я работаю в колл центре, и возникает необходимость структурировать часто задаваемые вопросы.
в левой части страницы будут находиться темы вопросов(ссылки), а в правой развернутый ответ. дело в том что при нажатии на тему необходимо показать 1 ответ, а остальные спрятать.
как показать/скрыть 1 элемент я знаю, а как показать скрыть div с разными id с помощью одной функции не понимаю
помогите написать функцию, которая при нажатии на тему покажет ответ в правой части страницы
|
|
05.06.2018, 09:03
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
region58,
поиск по форуму: открывашка
|
|
05.06.2018, 09:10
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width: 100%;
}
.block>div{
position: relative;
float: left;
width: 50%
}
.otv>div{
display: none;
}
.act{
color: red;
}
</style>
</head>
<body>
<div class="block">
<div class="vopr">
<div>Вопрос 1</div>
<div>Вопрос 2</div>
<div>Вопрос 3</div>
<div>Вопрос 4</div>
</div>
<div class="otv">
<div>Ответ 1</div>
<div>Ответ 2</div>
<div>Ответ 3</div>
<div>Ответ 4</div>
</div>
</div>
<script>
var elt = document.querySelectorAll(".vopr > div");
[].forEach.call(elt, function(el, i){
el.onclick = function(e){
[].forEach.call(elt, function(el, n){
el.className = n==i?'act':'';
});
[].forEach.call(document.querySelectorAll(".otv > div"), function(el, n){
el.style.display = n==i?'block':'none';
});
};
});
</script>
</body>
</html>
Последний раз редактировалось j0hnik, 05.06.2018 в 09:13.
|
|
05.06.2018, 09:16
|
|
Новичок на форуме
|
|
Регистрация: 05.06.2018
Сообщений: 2
|
|
|
j0hnik, +100500 к карме, как раз то что нужно!
|
|
05.06.2018, 09:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width: 100%;
}
.block>div{
position: relative;
float: left;
width: 50%;
}
.vopr > div.act{
color: red;
}
.vopr > div{
cursor: pointer;
}
.otv > div{
display: none;
}
.otv > div.act{
display: block;
}
</style>
</head>
<body>
<div class="block">
<div class="vopr">
<div class="act">Вопрос 1</div>
<div>Вопрос 2</div>
<div>Вопрос 3</div>
<div>Вопрос 4</div>
</div>
<div class="otv">
<div class="act">Ответ 1</div>
<div>Ответ 2</div>
<div>Ответ 3</div>
<div>Ответ 4</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var a = 0,
b = document.querySelectorAll(".vopr > div"),
c = document.querySelectorAll(".otv > div");
[].forEach.call(b, function(d, e) {
d.addEventListener("click", function(f) {
b[a].classList.remove("act");
c[a].classList.remove("act");
d.classList.add("act");
a = e;
c[a].classList.add("act")
})
})
});
</script>
</body>
</html>
|
|
05.06.2018, 09:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от region58
|
|
как раз то что нужно!
|
форум забит четырмя сотнями примеров на эту тему, j0hnik, хочет довести это количество до 500, возможно тогда их начнут замечать.  |
|
05.06.2018, 10:27
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
рони,
сколько из них ваши? наверняка не меньше сотни
|
|
05.06.2018, 11:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
j0hnik,
чуть больше 300
|
|
05.06.2018, 11:08
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
рони,
и это еще не предел, друг мой )
|
|
05.06.2018, 12:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от j0hnik
|
|
и это еще не предел, друг мой )
|
дерзай, у тебя всё впереди!!! |
|
|
|
