А как сделать, что бы при загрузке странице обработчик click, вызвался и установил в дефолтное положение ?
Дело в том, что по кнопкам у меня:
1) Активизирую input, выбранного меню (см ниже)
2) отправляется get запрос, на получение параметров.(еще не сделал так как застрял на дефолте)
window.addEventListener('DOMContentLoaded', function() {
var li = document.querySelectorAll('.os-settings-li'),
div = document.querySelectorAll('.content');
[].forEach.call(li, function(el, i) {
el.addEventListener('click', function() {
[].forEach.call(div, function(d, k) {
i != k && (li[k].classList.remove('show'), d.classList.remove('show'));
});
//------------------------------
el.classList.toggle('show')
if(div[i].classList=="content"){
div[i].classList.toggle('show');
}
//------------------------------
var jsonList_all = document.querySelectorAll('.JSON'); //все элементы с json и даже c ACT!!!
var jsonList_act = div[i].querySelectorAll('.JSON'); //все элементы внутри div
//------------------------------
//------Выключить JSON----------
//------------------------------
//------------------------------
for(var k = 0; k < jsonList_all.length; k++){
jsonList_all[k].classList.remove('act');
}
//------------------------------
for(var k = 0; k < jsonList_act.length; k++){
if(jsonList_act[k].classList=="JSON"){
jsonList_act[k].classList.toggle('act');
}
}
//------------------------------
<!-- console.log(jsonList_all); -->
<!-- console.log(jsonList_act); -->
//------------------------------
});
});
});
Сообщение от рони
|
dpts,
center font эти теги тоже бы выкинуть ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ru">
<title>test</title>
<style>
body{
font-family: Verdana, Geneva, sans-serif;
}
.one-section{
display: inline-block;
position: relative;
margin: 10px;
margin-top: 20px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
background: none;
color: #000000;
border: 1px dotted #3366FF;
border-radius: 3px;
-webkit-border-radius: 3px;
width: 94%;
height: auto;
}
.os-head{
color: #3366FF;
line-height: 20px;
background: white;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
font-weight: bold;
position: relative;
left: -10px;
top:-22px;
display: inline;
width: content;
z-index: 100;
}
.os-content{
background: none;
border: 0px none;
position: relative;
display: block;
top: -10px;
height: auto;
}
.os-section-name{
width: auto;
line-height: 40px;
font-weight: bold;
letter-spacing: 1px;
color: #3366FF;
font-size: 18px;
margin: 0px 20px;
padding: 0px;
display: inline;
}
.os-setting-link{
color: #3366FF;
text-decoration: none;
}
.os-settings-li {
text-decoration: none;
line-height: 30px;
background: #ffffff;
list-style-type: none;
text-transform: capitalize;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 5px;
padding-left: 10px;
font-size: 14px;
font-weight: bold;
border-left: 4px solid rgba(102,0,255,0.05);
}
.os-settings-li:hover {
background: rgba(153, 204, 255, 0.1);
text-transform: Uppercase;
font-weight: bold;
}
.maintbl{
width: 100%;
border-collapse: collapse;
border: 0px none;
}
.tdleft{
width: 20%;
height: 100%;
border-left: 0px none;
border-top: 0px none;
border-right: 1px dotted black;
border-bottom: 0px none;
}
.tdright{
width: 80%;
height: 100%;
border: 0px none;
}
.content{
display: none;
background: none;
width: 98%;
height: 98%;
}
.os-settings-li.show{
background-color: #FFA500;
}
.content.show{
display: block;
padding-left:7px;
padding-top:10px;
width: 98%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var li = document.querySelectorAll('.os-settings-li'),
div = document.querySelectorAll('.content');
[].forEach.call(li, function(el, i) {
el.addEventListener('click', function() {
[].forEach.call(div, function(d, k) {
i != k && (li[k].classList.remove('show'), d.classList.remove('show'));
});
el.classList.toggle('show')
div[i].classList.toggle('show')
});
});
});
</script>
</head>
<body>
<table class="maintbl">
<tr>
<td class="tdleft">
<ul>
<li class="os-settings-li">Пункт 1</li>
<li class="os-settings-li">Пункт 2</li>
<li class="os-settings-li">Пункт 3</li>
<li class="os-settings-li">Пункт 4</li>
</ul>
</td>
<td class="right">
<div class="content" id="1" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 1</font></h2></strong></center><br>
</div>
</div>
<div class="content" id="2" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 2</font></h2></strong></center><br>
</div>
</div>
<div class="content" id="3" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 3</font></h2></strong></center><br>
</div>
</div>
<div class="content" id="4" style=" ">
<div class="steeldetail_block" id="sdb2">
<center><strong><h2><font color="#595959">ПРО ПУНКТ 4</font></h2></strong></center><br>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
|
