Как заменить код при определённом размере экрана?

Question

[Евгений]

Есть в общем табы, для переключения.

<div class="tabs">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#par1"  data-toggle="tab">Акушерство</a>
                            </li>
                            <li role="presentation">
                                <a href="#par2" data-toggle="tab">Биохимия</a>
                            </li>
                            <li role="presentation">
                                <a href="#par3" data-toggle="tab">Вакцинация</a>
                            </li>
                            <li role="presentation">
                                <a href="#par4" data-toggle="tab">Гинекология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par5" data-toggle="tab">Стоматология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par6" data-toggle="tab">Томография</a>
                            </li>
                            <li role="presentation">
                                <a href="#par7" data-toggle="tab">Массаж</a>
                            </li>
                            <li role="presentation">
                                <a href="#par8" data-toggle="tab">Неврология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par9" data-toggle="tab">Ортопедия</a>
                            </li>
                            <li role="presentation">
                                <a href="#par10" data-toggle="tab">Освидетельствование</a>
                            </li>

                            <li role="presentation">
                                <a href="#par11" data-toggle="tab">Оториноларингология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par12" data-toggle="tab">Офтальмология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par13" data-toggle="tab">Реабилитология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par14" data-toggle="tab">Рентгенология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par15" data-toggle="tab">Терапия</a>
                            </li>
                            <li role="presentation">
                                <a href="#par16" data-toggle="tab">Травматология</a>
                            </li>
                            <li role="presentation">
                                <a href="#par17" data-toggle="tab">УЗИ</a>
                            </li>
                            <li role="presentation">
                                <a href="#par18" data-toggle="tab">Урология</a>
                            </li>

                            <li role="presentation">
                                <a href="#par19" data-toggle="tab">Физиотерапия</a>
                            </li>
                            <li role="presentation">
                                <a href="#par20" data-toggle="tab">Диагностика</a>
                            </li>
                            <li role="presentation">
                                <a href="#par21" data-toggle="tab">Хирургия</a>
                            </li>

                        </ul>
                    </div>

И если на компе выглядит ещё более менее

То на телефоне беда бедулечка

Думаю сделать эти табы через выпадающий список. Но получается же что нужно менять часть кода?

Answer 1

[Одиночка Айс]

Сделайте псевдо-select на списках, который будете показывать в адаптивной версии, а на десктопе список распадается на вид обычных li.

Answer 2

[George Shinkarev]

Как вариант, вы можете сверстать два блока - tabs-desktop и tabs-mobile.
А в css отображать нужный, в зависимости от ширины экрана

.tabs-mobile {
    display: block;
}

@media only screen and (max-width: 800px),
only screen and (max-device-width: 800px) {

    .tabs-desktop {
        display: none;
    }

    .tabs-mobile {
        display: block;
    }

}

Comments

[Евгений]

Я решил попробовал и для начала просто сделал табы из списка. Но проблема в том, что каждый таб в списке становится Active. Из-за этого получается неразбериха

И активный пункт синий и прошлый пункт синий и всё что будет клик будет синим)