CSS (начальная загрузка): активный / текущий элемент меню с вкладками не выделен - PullRequest
Новая
       10

CSS (начальная загрузка): активный / текущий элемент меню с вкладками не выделен

0 голосов
/ 30 апреля 2018

Я изменяю тему начальной загрузки и у меня есть одна хитрая небольшая проблема (которая также появляется в неизмененной теме) в том, что при первой загрузке страницы активная / текущая вкладка не отображается как таковая. Вкладка с пометкой FIRST должна отображаться с голубым фоном при загрузке страницы, но вместо этого она изменяется только с серого на голубой при нажатии.

HTML выглядит так: 

<ul class="service_tabe_menu nav nav-tabs" role="tablist">
  <li role="presentation" class = "current"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">FIRST</a></li>
  <li role="presentation"><a href="#second" aria-controls="second" role="tab" 
  data-toggle="tab">SECOND</a></li>
  <li role="presentation"><a href="#third" aria-controls="third" role="tab" data-toggle="tab">THIRD</a></li>
</ul>

А CSS вот так: 

.service .nav-tabs>li>a{
    text-align: center;
    color: #444444;
    width: 150px;
    height: 80px;
    margin-left:10px;
    background: url(../images/skmenubg.png) no-repeat top center;
    border:0px;
    transition: all 0.6s;
}
.service_tabe_menu.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
    background: url(../images/skmenubgh.png) no-repeat top center;
    width:150px;
    height: 80px;
    color:#fff;

}
.service_tabe ul li a:hover{
   background: url(../images/skmenubgha.png) no-repeat top center;
   color:#fff;
}

.service_tabe_menu li nav nav-tabs li.current a:active {
   background: url(../images/skmenubgh.png) no-repeat top center;
   color:#fff;
}

.service_tabe ul li a i{
    font-size:2rem;
    margin-top:40px;
    margin-bottom:25px;
}

.service .tab-content{
    margin-top:100px;
}

Я поступаю неправильно? редактировать: обновление на основе отзывов

1 Ответ

0 голосов
/ 30 апреля 2018

В вашей таблице стилей отсутствуют некоторые буквы / классы. кодовая ручка с исправлениями

Вы хотите убедиться, что вы предоставляете правильные классы для javascript, поэтому вы используете активный и текущий, обычно у вас будет только один. Вам нужно назначить активный класс в html, чтобы css / js знал, что активно при загрузке страницы. Кроме того, вы можете указать li как .service_tabe_menu li или ul li, поскольку ul имеет класс service_tabe_menu, вы не используете .service_tabe_menu ul, потому что в этом классе нет ul. Надеюсь, это поможет.

...