Efecto: haga clic en la fuente del elemento de navegación para cambiar el color y agregue una línea horizontal en la parte inferior
1. Utilice principalmente isActive para determinar qué página de navegación es
2. Otro problema es que mientras se actualice la página, ir a la página de inicio. Es porque la etiqueta a tiene un salto. Para evitar el salto predeterminado de una etiqueta, también se puede lograr href = "javascript: void (0)
<li><a href="javascript:;" :class="isActive=='首页' ? 'isActive':''" @click="toggle()"> 恵牧首页</a><i :class="isActive=='首页'? 'bottomline':'bottomLine'"></i></li>
2. Anteriormente, isActive se asignaba a través del evento de clic de cada elemento de navegación, pero cada página tiene un subcomponente de la navegación superior, y habrá dos clics para agregar el nombre de la clase (tal vez porque cada página tiene un subcomponente de navegación), entonces Pensé en dejar que cada página de navegación pasara el valor isActive de
2.1 al componente de navegación en el componente principal
<header-nav :isActive='isActive'></header-nav>
2.2 En los datos del componente padre
isActive:'加入',
3. En el 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 No haga clic en la línea horizontal inferior: estilo de desplazamiento
.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;
}