Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 12.01.2016, 09:30
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

А без нее не показывает див - только li подсвечивает.
и при кликах по li - дивы не показывает и подсветку не снимает

Последний раз редактировалось dpts, 12.01.2016 в 09:34.
Ответить с цитированием
  #12 (permalink)  
Старый 12.01.2016, 09:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dpts,
смотрите css и html в 3 посте.
Ответить с цитированием
  #13 (permalink)  
Старый 12.01.2016, 09:50
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Сообщение от рони Посмотреть сообщение
dpts,
смотрите css и html в 3 посте.
Понял. Сейчас поищу
Ответить с цитированием
  #14 (permalink)  
Старый 12.01.2016, 10:01
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

я дибил.
Нашел. Заработало.
Ответить с цитированием
  #15 (permalink)  
Старый 04.12.2017, 07:18
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

А как сделать, что бы при загрузке странице обработчик 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">ПРО&nbsp;ПУНКТ 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">ПРО&nbsp;ПУНКТ 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">ПРО&nbsp;ПУНКТ 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">ПРО&nbsp;ПУНКТ 4</font></h2></strong></center><br>

                        </div>
                    </div>
        </td>
    </tr>
   </table>


</body>

</html>
Ответить с цитированием
  #16 (permalink)  
Старый 04.12.2017, 09:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от pokk
А как сделать, что бы при загрузке странице обработчик click, вызвался и установил в дефолтное положение ?
строка 134
!i && el.click() });

бред какой-то
Сообщение от pokk
if(jsonList_act[k].classList=="JSON")
есть classList.contains
if(jsonList_act[k].classList.contains("JSON")){

на крайний случай
if(jsonList_act[k].className=="JSON")
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активного пункта меню sergofedor06 jQuery 15 23.11.2015 12:15
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 19:14
анимация активного пункта меню rustleofstars Элементы интерфейса 0 27.04.2013 17:56