vue realizes menu switching, click menu navigation to switch different contents, and add styles or components to the currently clicked options.
In the method:
css:
html code:
<nav>
<ul>
<li>
<a :class="{active : Index == 1}" @click="changeNav(1)">School News</a>
<div v-if="Index == 1" class="line"></div>
</li>
<li>
<a :class="{active : Index == 2}" @click="changeNav(2)">Employment News</a>
<div v-if="Index == 2" class="line"></div>
</li>
<li>
<a :class="{active : Index == 3}" @click="changeNav(3)">Industry News</a>
<div v-if="Index == 3" class="line"></div>
</li>
</ul>
</nav>
js code:
data () {
return {
Index:1,
}
},
methods:
{//Navigation switchchangeNav(index){
if(index == 1){
= 1;
}else if(index == 2){
= 2;
}else if(index == 3){
= 3
}
},
css code:
.news-container nav li .line{
width: 50px;
height: 4px;
background: #E96463;
border: none;
position: relative;
top: -4px;
right: -86px;
}
.news-container nav li .active{
color: rgba(233,100,99,1);
}
}
Summarize
The above is the vue menu switching function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!