Как удалить класс без js при изменении разрешения экрана?

Question

[skvoshiz]

Здравствуйте, только изучаю html/css/js, и не могу получить понятного ответа через google.
Использую bootflat
Нужно удалять и добавлять класс в зависимости от разрешения у id="nav-reg-login"
Когда ширина экрана больше 768px то

<ul id="nav-reg-login" class="nav nav-tabs nav-justified">
   <li class="active"><a href="#reg" data-toggle="tab">Регистрация</a></li>
   <li><a href="#login" data-toggle="tab">Войти</a></li>
</ul>

если меньше 768px то

<ul id="nav-reg-login" class="nav nav-tabs">
   <li class="active"><a href="#reg" data-toggle="tab">Регистрация</a></li>
   <li><a href="#login" data-toggle="tab">Войти</a></li>
</ul>

Использую для этого скрипт:

<script>
        $(document).ready(function() { 
            var windowWidth = $(window).width();
            if(windowWidth > 768)$("#nav-reg-login").addClass("nav-justified");
            else $("#nav-reg-login").removeClass("nav-justified");
            
            $(window).resize(function(){
                var windowWidth = $(window).width();
                if(windowWidth > 768)$("#nav-reg-login").addClass("nav-justified");
                else $("#nav-reg-login").removeClass("nav-justified");
            });
        });
    </script>

Вопросы:
Можно это сделать без использования js?
Как правильно делать подобные изменения?
Если правильный вариант - использовать js, то как этот скрипт перенести в отдельный файл и подключить его?

Comments

[Евгений Подивилов]

Без JS можно. CSS3, а конкретно медиа-запросы. htmlbook.ru/css/value/media

[skvoshiz]

Евгений Подивилов: пытался media использовать, но получилось менять только свойства классов, а не сами классы

[Евгений Подивилов]

skvoshiz: Если прямо удалять/добавлять классы, то скорее всего только JS. Но менять дизайн и поведение можно и без удаления класса. Я так понимаю у вас класс "nav-justified" просто на оформление влияет? В таком случае я бы с помощью медиа-запросов настроил бы разное оформление для этого класса и не удалял бы его.

[skvoshiz]

Евгений Подивилов: этот класс дает bootstrap. Мне просто нужно чтоб при разном разрешении экрана он то прописывался то удалялся.

[skvoshiz]

Евгений Подивилов: Просто это мне в дальнейшем тоже понадобится. Знание данного функционала.

Answer 1

[IceJOKER]

1. Нельзя, изменения html только с помощью JS
2. Использоваться media queries
3. Перенести весь код в файл script.js , а потом подключить его

Comments

[Максим Люмен]

я свой ответ удалил , и в нём всё это писал уже - ТС в чём то не был согласен со мной

[IceJOKER]

Максим Люмен: не совсем понял смысл вашего комментария

[Максим Люмен]

IceJOKER: я говор что я уже писал ему это (то что вы написали) но автор вопроса сказал что ему типа это не подходит

[IceJOKER]

Максим Люмен: ну это уже его проблемы

[skvoshiz]

IceJOKER: Спасибо за ответ. Теперь все понятно. Просто в предыдущих ответах меня путали, и говорили, что возможно это сделать через CSS3 media

[IceJOKER]

skvoshiz: о чем я и написал в ответе, второй пункт. Вы не можете поменять html, но можете поменять стили в зависимости от ширины, высот и т.д.

Answer 2

[lp85d]

.tv-dialog__overlay {
/* z-index: 111; */
background-color: #ffffff00;
}

Если задача стоит убрать "css убрать класс оверлей"
https://ru.tradingview.com/chart/?symbol=WEX:ETHRUR

Теперь не обязательно регистрироваться на сайте чтобы небыло оверлея