Efeito: Clique na fonte do item de navegação para alterar a cor e adicione uma linha horizontal na parte inferior
1. Use principalmente isActive para determinar qual página de navegação é
2. Outro problema é que, enquanto a página for atualizada, ela irá pule para a página inicial. Isso ocorre porque o rótulo a tem um salto. Evite o salto padrão de uma tag, href = "javascript: void (0) também pode ser alcançado
<li><a href="javascript:;" :class="isActive=='首页' ? 'isActive':''" @click="toggle()"> 恵牧首页</a><i :class="isActive=='首页'? 'bottomline':'bottomLine'"></i></li>
2. Anteriormente, isActive era atribuído por meio do evento de clique de cada item de navegação, mas cada página tem um subcomponente da navegação superior, e haverá dois cliques para adicionar o nome da classe (talvez porque cada página tenha um subcomponente de navegação), então Pensei em deixar cada página de navegação passar o valor isActive de
2.1 para o componente de navegação no componente pai
<header-nav :isActive='isActive'></header-nav>
2.2 Nos dados do componente pai
isActive:'加入',
3. No subcomponente
props: {
isActive:{
type:String,
default:"首页"
}
},
4. Estilo
.isActive {
color: #8BC01F!important;
}
.bottomline{
display: inline-block;
width: 40px;
height: 2px;
background-color:#8BBF1F ;
position: absolute;
bottom: 32px;
left: 15px;
}
4.1 Não clique na linha horizontal inferior: estilo pairar
.nav .container .item .itemList li .bottomLine{
display: inline-block;
display: none;
width: 40px;
height: 2px;
background-color:#8BBF1F ;
position: absolute;
bottom: 32px;
left: 15px;
}
.nav .container .item .itemList li:hover .bottomLine{
display:block;
}