Активный класс на элементе (Navbar) - PullRequest
Новая
       9

Активный класс на элементе (Navbar)

0 голосов
/ 31 января 2019

Я работал над навигационной панелью и изо всех сил пытался разобраться с полученным JQuery.

Я опубликую свой код ниже и ссылку на кодовую ручку (https://codepen.io/JustNayWillo/pen/aXpKbb)).чтобы вы могли лучше понять.

HTML: 

<div id="navbar">

    <li class="tab">

        <a class="link active" href="#home">
            <div class="text">Home</div>
        </a></li>

    <li class="tab">

        <a class="link" href="#work">
            <div class="text">Work</div>
    </a></li>

    <li class="tab">

        <a class="link" href="#about">
            <div class="text">About</div>
    </a></li>
</div>

CSS: 

#navbar {
  position: absolute;
  text-align: right;
  top: 3.5em;
  right: 3.5em;
  z-index: 2;
  list-style-type: none;
}

.tab {
  background-color: white;
  opacity: 0.3;
  height: 3.5em;
  width: 0.2em;
  margin-bottom: 1em;
}

.active, .tab:hover {
  opacity:1;
  transition:0.7s ease;
}

.active, .link:hover {
  opacity:1;
  transition:0.7s ease;
}

.active, .text:hover {
  opacity:1;
  transition:0.7s ease;
}

JS / jQuery: 

$(function() {
    var links = $('.tab > .link');
    links.on('click', function() {
        links.closest('.tab').removeClass('active');
        $(this).closest('.tab').addClass('active');
    });
});

Все работает хорошо, однако навигация не начинается с активного класса, я бы хотел, чтобы «Дом» был активным при запуске. Другая проблемазаключается в том, что текст не остается активным, отображается только при наведении курсора, я хотел бы, чтобы этот параметр оставался непрозрачным: 1, когда он активен.

Спасибо, ребята.

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Добавить этот CSS в стиле 

.active .text{
  opacity:1;
}

Обновить HTML 

<div id="navbar">

<li class="tab active">

    <a class="link active" href="#home">
        <div class="text">Home</div>
    </a></li>

<li class="tab">

    <a class="link" href="#work">
        <div class="text">Work</div>
</a></li>

<li class="tab">

    <a class="link" href="#about">
        <div class="text">About</div>
</a></li>

скрипт обновления 

 $(function() {
     var links = $('.tab > .link');
    links.on('click', function() {
       $('#navbar').find('.active').removeClass('active');
       $(this).closest('.tab').addClass('active');
       $(this).closest('.link').addClass('active');
    });
 });
0 голосов
/ 31 января 2019

Добавить этот CSS 

.text:hover, .active .text {
  opacity:1;
  transition:0.7s ease;
}

Изменения HTML

Добавить активный class на tab

<li class="tab active">

https://codepen.io/anon/pen/yZgExB

...