Попытка выбрать предыдущий элемент li выбранного элемента li ul - PullRequest
Новая
       36

Попытка выбрать предыдущий элемент li выбранного элемента li ul

0 голосов
/ 24 марта 2019

Я перебираю элементы списка, чего я хочу добиться, чтобы не иметь права границы для элемента, который предшествовал (Сводка 2), до активного li (Mindmap 3), как показано на изображении он всегда назначает границу каждому элементу в неупорядоченном списке, я написал это if условие, которое говорит, что присваивает границу всем элементам li, индекс которых меньше длины неупорядоченного списка, а не элементу, который предшествует выбранному li, но он также назначает border-left этому элементу, который в нашем случае равен summary 2 . Я думаю, что-то не так с условием if, но я не могу понять, что? 

<ul class="nav nav-tabs">
  <li *ngFor="let tab of tabs; let i = index" (click)="selectTab(tab)" 
      [class.active]="tab.active"
      [class.border]="(i < tabs.length - 1) && !(tabs[i+1]?.active)">
    <div>
      <div>
        <img class="icon" style="width: 18px;"
             src="../../../assets/icons/{{tab.icon}}.svg">
       {{tab.title}} {{i}}
    </div>
    </div>
  </li>
</ul>

enter image description here

Определения Css следующие. 

.active {
  border: 1px solid #eaeef0;;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid white;
  margin-bottom: -6px;
  height: 44px;
}

.border {
  border-right: 1px solid red;
}

1 Ответ

0 голосов
/ 24 марта 2019

Я думаю, вам не нужно выбирать предыдущий элемент li, чтобы удалить границу.Просто установите левую границу вместо правой и измените свой CSS, как показано ниже.

li {
    border-left: 1px solid red;
}

li:nth-child(1) {
    border-left:none; /*First element should not have a left border*/
}

li.active {
    border-left: none;/*Border definition for active element*/
}
...