Bootstrap игнорировать изменения стиля

Question

Bootstrap игнорировать изменения стиля

Я разрабатываю простую веб-страницу, используя Twitter Bootstrap.

На боковой панели у меня есть 3 кнопки. Каждая из этих кнопок вызывает функцию, чтобы показать один div и скрыть другие.

HTML-код выглядит примерно так:

<div>

   <div class="row" id="general" style="display:none">

   Text1

   </div>

   <div class="row" id="medication" style="display:none">

   Text2

   </div>

   <div class="row" id="diet" style="display:none">

   Text3

   </div>

</div>

И это одна из функций JS, которая скрывает / показывает DIVs:

 function showGeneral(){

        document.getElementById('general').style.display = 'block';

        document.getElementById('medication').style.display = 'none';

        document.getElementById('diet').style.display = 'none';

      }

Я обновляю код с помощью ответа @ChaoticNadirs, но по-прежнему не работает.
Вот мой код в Bootply

Проблема в том, что функция работает правильно, но один раз это закончить все дивы снова стали скрытыми (по умолчанию).

Я чувствую, что проблема может быть в любом переходе из - за платформы Twitter Bootstrap.

Кто-нибудь знает, как это решить?

643 2

javascript html css twitter-bootstrap

2 ответов:

Comments

Ничего не найдено.

ChaoticNadirs · Accepted Answer · 2014-09-23 11:33:29

Bootstrap предоставляет класс .hidden. Для скрытия и отображения элементов можно использовать этот стиль, а не стиль отображения.

Проверьте этот bootply для примера: http://www.bootply.com/uY7kHe3Nw7

HTML:
<button class="btn btn-default" id="show-general">Show General</button>

<div>
   <div class="row hidden" id="general">
     Text1
   </div>
   <div class="row" id="medication">
     Text2
   </div>
   <div class="row" id="diet">
     Text3
   </div>
</div>
JS:
$("#show-general").on('click', showGeneral);

function showGeneral(){
        $('#general').removeClass('hidden');
        $('#medication').addClass('hidden');
        $('#diet').addClass('hidden');
      }
Редактировать:

В новом примере вы запускаете событие по клику <div> внутри тега <a>. Вы можете сделать что-то вроде этого, чтобы предотвратить действие по умолчанию:

JS:
$('#showGeneral').on('click', showGeneral);

function showGeneral(e){
    e.preventDefault();
    $('#general').removeClass('hidden');
    $('#medication').addClass('hidden');
    $('#diet').addClass('hidden');
    $('#workout').addClass('hidden');
}
Вот новый ботинок.: http://www.bootply.com/3RkAbPX6d0

poopoothegorilla · Accepted Answer · 2014-09-22 17:59:26

Можно попробовать использовать атрибут "видимость"... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility Вы можете прочитать больше об этом здесь.

Обычно я применяю класс к элементу, который я хотел бы скрыть. Таким образом, он предотвращает использование встроенных стилей. Если вы не заботитесь о встроенном стиле, вы также можете использовать методы show(),hide () или toogle() в jQuery.

Я не думаю, что проблема в Bootstrap.