Effect: Click on the font of the navigation item to change the color, and add a horizontal line at the bottom
1. Mainly use isActive to determine which navigation page is
2. Another problem is that as long as the page is refreshed, it will jump to the home page. It is because the label a has a jump. Prevent the default jump of a tag, href="javascript:void(0) can also be achieved
<li><a href="javascript:;" :class="isActive=='首页' ? 'isActive':''" @click="toggle()"> 恵牧首页</a><i :class="isActive=='首页'? 'bottomline':'bottomLine'"></i></li>
2. Previously, isActive was assigned through the click event of each navigation item, but each page has a subcomponent of the top navigation, and there will be two clicks to add the class name (maybe because each page has a navigation subcomponent ), so I thought of letting each navigation page pass the isActive value of
2.1 to the navigation component in the parent component
<header-nav :isActive='isActive'></header-nav>
2.2 In the data of the parent component
isActive:'加入',
3. In the sub-component
props: {
isActive:{
type:String,
default:"首页"
}
},
4. Style
.isActive {
color: #8BC01F!important;
}
.bottomline{
display: inline-block;
width: 40px;
height: 2px;
background-color:#8BBF1F ;
position: absolute;
bottom: 32px;
left: 15px;
}
4.1 Do not click on the bottom horizontal line: hover style
.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;
}