활성 클래스가 다른 'li'항목에 적용될 때 캐럿 심볼을 표시하는 방법 (예 : li 항목을 클릭했을 때)

Question

나는 knockout 및 css를 처음 사용하며 다음과 관련하여 도움이 필요합니다.

활성 클래스가 다른 'li'항목 (예 : li 항목을 클릭했을 때)에 적용되면 어떻게 캐럿 기호가 표시됩니까?

아래는 구현 된 코드입니다.

<li class="" data-bind="css: { 'active': $index() == 0 }, visible: { true: $index() == 0 }"> 
<a data-toggle="tab" data-bind="attr: { href: '#' + CatID }"> 
<span data-bind="if: $index() == 0 "> 
<span class="caret"></span> 
</span></a> 
</li> 

도움이 될 것입니다.

Answer 1

CSS pseudo elements을 사용하고 active 클래스의 content 속성을 지정할 수 있습니다. 여기 ::before

::before의 예제는 유사한 요소의 첫 번째 자식 인 가상 요소를 생성한다. 이것은 종종 content 속성을 사용하여 요소에 화장품 콘텐트를 추가하는 데 사용됩니다.

.active::before { 
 
    content: '^' 
 
}

<ul> 
 
    <li class="active">Yahooooooo</li> 
 
    <li>Test</li> 
 
</ul>