Bootstrap 4 navbar активный класс - PullRequest
Новая
       7

Bootstrap 4 navbar активный класс

0 голосов
/ 04 мая 2018

Я начал изучать веб-программирование как проект, и мне было трудно заставить свои ссылки показываться как активные на панели навигации. Я начал с поиска похожих вопросов, заданных в прошлом, но ни один из ответов, казалось, не решил мою проблему.

Вот мой код 

<div>
<hr>
    <nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
        <ul class="navbar-nav">
            <li class="active nav-item">
                <a class="nav-link active" style = "padding-left: 0px; color: white;" href="#">Most Popular</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">News</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Sports</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Science</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Politics</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Economics</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Random</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
            </li>
        </ul>
    </nav>
</div>

и я попытался использовать этот javascript, который я нашел, но пока он не работал 

$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
})

Надеюсь, мой код не слишком прикольный, так как я только начинаю. Любая помощь будет чрезвычайно признательна большое спасибо!

1 Ответ

0 голосов
/ 04 мая 2018

Есть несколько проблем ...

  1. Селектор $ ('. Nav li') ничего не делает, потому что у вас нет .nav класс используется в любом месте разметки. Это должно быть $ ('. Navbar-nav .nav-link').
  2. У вас есть style="color:white" в ссылках, которые будут отменять любые изменения, которые вы делаете с классом active.
  3. У вас нет CSS для активного класса, и по умолчанию активный класс Bootstrap на navbar-dark будет белым. Какой цвет вы пытаетесь установить?
  4. Установить в nav-link вместо li, 
.navbar-dark .nav-item > .nav-link.active  {
    color:white;
}

$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})

Демо: https://www.codeply.com/go/I3EjDb74My

...