функция показать/скрыть
Уважаемые программисты! я работаю в колл центре, и возникает необходимость структурировать часто задаваемые вопросы.
в левой части страницы будут находиться темы вопросов(ссылки), а в правой развернутый ответ. дело в том что при нажатии на тему необходимо показать 1 ответ, а остальные спрятать. как показать/скрыть 1 элемент я знаю, а как показать скрыть div с разными id с помощью одной функции не понимаю помогите написать функцию, которая при нажатии на тему покажет ответ в правой части страницы |
region58,
поиск по форуму: открывашка |
<!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, +100500 к карме, как раз то что нужно!
|
:)
<!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>
|
Цитата:
|
рони,
сколько из них ваши? наверняка не меньше сотни :) |
j0hnik,
чуть больше 300 |
рони,
и это еще не предел, друг мой ) |
Цитата:
|
| Часовой пояс GMT +3, время: 08:42. |