0

Доброго времяни суток. Подскажите пожалуйста почему мой js код не обрабатывается Bitrix`сом.

Мне нужно чтоб при нажатии на кнопку у меня один div получал display="none", а другой display="block"

Я пытался через jquery, js и даже уже через bitrix`совые функции... но все равно не получается.. видать я криворукий слишком. Вот js код :

var b1 = document.getElementById("b1");
var d1 = document.getElementById("d1");

var b2 = document.getElementById("b2");
var d2 = document.getElementById("d2");

  b1.onclick = function(){
      if(d1.style.display == 'none'){
    d1.style.display = 'block';
    d2.style.display = 'none';
    }else{
      d1.style.display = 'none';
      }
  };
  
  b2.onclick = function(){
      if(d2.style.display == 'none'){
    d2.style.display = 'block';
    d1.style.display = 'none';
    }else{
      d2.style.display = 'none';
      }
  };
#d1 {
    width: 100px;
    height: 100px;
    border: 1px solid #900;
    background-color:red;
}

#d2 {
    width: 100px;
    height: 100px;
    border: 1px solid #900;
    background-color:blue;
    display:none;
}
<button id="b1">кнопка 1</button>
<button id="b2">кнопка 2</button>
<br />
<br />
<br />
<br />
<div id="d1">контент</div>

<div id="d2">контент</div>

5
  • у меня почему-то ошибок не выдавал данный пример, но лучше проверять наличие стилей как в моем ответе ниже...
    – Air
    8 дек 2017 в 8:43
  • @Air Я разобрался почему выдавало ошибку, это не было связанно с кодом, но код все равно не обрабатывается =( 8 дек 2017 в 8:45
  • Попробуй так, я изменил вызов функции...
    – Air
    8 дек 2017 в 8:49
  • @Air ничего не происходит, никаких признаков жизни. ): Может я что то не так делаю? я вообще правильно вызываю js? <script type="text/javascript">код</script> 8 дек 2017 в 8:53
  • сожалею, был бы рад помочь... Я с Bitrix-ом не знаком... Совет, опиши проблему подробнее и выложи код сюда... Не я так другие помогут...
    – Air
    8 дек 2017 в 8:58

1 ответ 1

0

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

button1.addEventListener('click', openClose);
button2.addEventListener('click', openClose);


function openClose() {

  if ((getComputedStyle(div2).getPropertyValue('display') === "none") &&
    (getComputedStyle(div1).getPropertyValue('display') === "block")) {
    div2.style.display = 'block';
    div1.style.display = 'none';
  } else {
    div2.style.display = 'none';
    div1.style.display = 'block';
  }
}
#div1 {
  width: 100px;
  height: 100px;
  border: 1px solid #900;
  background-color: red;
  display: block;
}

#div2 {
  width: 100px;
  height: 100px;
  border: 1px solid #900;
  background-color: blue;
  display: none;
}
<button id="button1">button 1</button>
<button id="button2">button 2</button>
<br />
<br />
<br />
<br />
<div id="div1">div1</div>

<div id="div2">div2</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.