Javascript-форум - Закрытие и открытие дива по клику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Закрытие и открытие дива по клику (https://javascript.ru/forum/misc/25996-zakrytie-i-otkrytie-diva-po-kliku.html)

window.onload = function()

Понятно, что окно при загрузке открывается с window.onload
Вот только не хватает ума правильно удалить window.onload.
Скрипт перестаёт работать.
Уж простите великодушно.
Помогите.

Цитата:

Сообщение от Мускусный кроль

window.onload

холодно

Вот этот код закрывает окно по esc и одновременно открывает окно (div) при загрузке/перезагрузке страницы. Как разделить эти две функции - ума не приложу.

/* добавка - закрытие дива по esc*/
window.onload = function() {
document.addEventListener('keydown', function(event) {
event.keyCode == 27 && document.querySelector(".max").classList.remove("m ax")
});
_click(1)
}

Цитата:

Сообщение от Мускусный кроль

_click(1)

убрать

РОНИ, спасибо за науку.
Пока ждал твоего ответа, облазил весь интернет, вчитался в строки твоего кода, дочитался до _click(1), убрал его - всё работает.

Потом зашел сюда, прочитал твоё сообщение:
_click(1)
убрать

Теперь вот сижу ржу, как конь. Плюс тебе в карму за науку. :):):) К сожалению, правила форума не дают возможности добавить два плюса подряд. Спасибо.:):):)
А все проблемы от стереотипа. Вот статья о вредности стереотипного мышления (это юмор)
http://tehnopost.info/things/5-sisadmin.html

рони,
А подскажите,пожалуйста, куда нужно дописать scrolTo к открывающемуся id, что бы страница прокручивал к открывшемся div, по Вашей открывашке?
http://javascript.ru/forum/misc/2599...tml#post388975

d1mka21,

var _click = function () {
        var b = 1;
        return function (c) {
            var a = document.getElementById("item" + b);
            c == b && (a.className = "" == a.className ? "max" : "");
            c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c);
            a = document.querySelector(".max");
            a && a.scrollIntoView() //$(".max").scrolTo()
        }
    }();

строки 7,8 заменить на коментарий или не использовать плагин и вставить эти строки

Здравствуйте, взял за основу ваши наработки. Хотел добавить, чтобы когда одна из ссылок активна, она была закрашена другим цветом. А при переходе на другую ссылку, первая становилась прежней, а текущая красилась.
Пробовал разные варианты и другие наработки, ничего пока не получилось.

<!DOCTYPE html>
<html>
<head>
  <title></title>

<style>
#text {
    padding: 5px 0px 5px 0px;
 	margin: 20px 0px;
}


.qwer {
color: #232323;
font-size: 10pt;
border: solid 1px #999;
margin: 15px;
padding: 10px 30px;
}
	  
	  #text a:hover {
background-color: #ff830a;
}

#text a:active {
  background: yellow;
}

</style>
<script type="text/javascript">
var _click = function () {
        var b = 1;
        return function (c) {
            var a = document.getElementById("item" + b);
            c == b && (a.style.display = "none" == a.style.display ? "" : "none");
            c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
        }
    }();
window.onload = function() {
    _click(1)
 }
</script>
</head>

<body>
<div id="text">
<a onclick="_click(1); return false;" href="" class="qwer">ОПИСАНИЕ</a>
<a onclick="_click(2); return false;" href="" class="qwer">ХАРАКТЕРИСТИКИ</a>
<a onclick="_click(3); return false;" href="" class="qwer">ЗАМЕР</a>
<a onclick="_click(4); return false;" href="" class="qwer">МОНТАЖ</a>
</div>


<div style=" display:none" id="item1">div1</div>
<div style=" display:none" id="item2">div2</div>
<div style=" display:none" id="item3">div3</div>
<div style=" display:none" id="item4">div4</div>

</body>
</html>

Nekitok,

<!DOCTYPE html>
<html>
<head>
  <title></title>
<meta charset="utf-8">
<style>
#text {
    padding: 5px 0px 5px 0px;
 	margin: 20px 0px;
}


.qwer {
color: #232323;
font-size: 10pt;
border: solid 1px #999;
margin: 15px;
padding: 10px 30px;

}

#text a:hover {
background-color: #ff830a;
}

#text a:active, #text a.active {
  background: yellow;
}

.item{
  display: none;
}

.item.active {
   display: block;
}

</style>
<script type="text/javascript">
var _click = function () {
        var b = 1;
        return function (c) {
            var a = document.getElementById("item" + b), k = document.querySelector(".qwer:nth-child("+b+")");
            c == b && (a.classList.toggle("active"),k.classList.toggle("active"));
            c != b && (a.classList.remove("active"),
            k.classList.remove("active"),
            a = document.getElementById("item" + c),
            a.classList.add("active"),
            k = document.querySelector(".qwer:nth-child("+c+")"),
            k.classList.add("active"),
            b = c)
        }
    }();
window.onload = function() {
    _click(1)
 }
</script>
</head>

<body>
<div id="text">
<a onclick="_click(1); return false;" href="" class="qwer">ОПИСАНИЕ</a>
<a onclick="_click(2); return false;" href="" class="qwer">ХАРАКТЕРИСТИКИ</a>
<a onclick="_click(3); return false;" href="" class="qwer">ЗАМЕР</a>
<a onclick="_click(4); return false;" href="" class="qwer">МОНТАЖ</a>
</div>


<div class="item" id="item1">div1</div>
<div class="item" id="item2">div2</div>
<div class="item" id="item3">div3</div>
<div class="item" id="item4">div4</div>

</body>
</html>

рони,
Большое спасибо! Очень оперативно)