html5 скрыть все div и показать один при нажатии кнопки

Question

У меня есть несколько кнопок настройки, и я могу заставить их показывать и скрывать div-ы при нажатии, эта часть работает нормально.Но я хотел бы знать, возможно ли, чтобы они скрывали все остальные элементы div, когда он показывает, чтобы divone отображался при загрузке.

Кнопки:

<button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divone">One</button>
        <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divetwo">two</button>
        <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divthree">Threee</button>

Div:

<div id="divone" class="collapse">div one here</div> <div id="divetwo" class="collapse">div twohere</div> <div id="divthree" class="collapse">div three here</div>

Answer 1

Это простой.Сохраняя ваши классы и HTML-разметку, я бы добавил этот стиль CSS, чтобы заставить элемент отображаться ... и использовал jQuery для добавления / удаления этого класса по мере необходимости.

.unhide{
        display: block !important;
    }

Далее, после импорта jQuery, используйтеэтот короткий скрипт для обработки логики кликов:

<script type="text/javascript">
    $(".btn").click(function(){
        $('.collapse').removeClass('unhide');
        $($(this).data("target")).addClass('unhide');
    })
</script>

Чтобы объяснить логику здесь, при нажатии любой кнопки мы сначала удаляем класс «force to display», который мы только что создали.Затем мы получаем целевой объект этой конкретной кнопки и вставляем это значение в качестве идентификатора, и мы используем его на втором шаге, чтобы добавить класс «force to display».(знаки двойных денег)

Вы всегда можете проявить больше креативности с именами классов, если хотите!