Many friends who have just come into contact with mobile may have some doubts about clicking and jumping routes, especially using Vue routes. Therefore, this article leads friends to try to use css to jump pages.
The effect is as shown in the figure. Since it is a mobile terminal, I choose the preview mobile simulation:
HTML<body> <main> <div id=shouye>shouye</div> <div id=zhanlan>zhanlan</div> <div id=geren>geren</div> </main> <nav> <a href=#shouye class=link>shouye</a> <a href=#zhanlan class=link>zhanlan</a> <a href=#geren class=link>geren</a> </nav> </body>
It is mainly divided into two parts: main and nav. The three divs contained in main represent three different pages, and the corresponding three different a in the nav at the same time. It is especially important to note that the href in the a tag corresponds to the ids of the three divs contained in main.
CSS *{padding: 0;margin: 0;}body{height: 100vh;width: 100vw;display: flex;flex-direction: column;position: relative;}body::after{/*Default background*/content: this is my text;font-size:4em;position: absolute;left: 50%;top: 50%;opacity: .8;transform: translate(-50%,-50%);}main{width: 100%;flex: 1;position: relative;}nav{background-color: #2C3E50;height: 8vh;display: flex;justify-content: space-between;align-items: center;}nav .alink{flex: 1;color: #C3BED4;text-align: center;font-size: 2.5em;text-decoration: none;text-transform: uppercase;opacity: .8;}nav .alink:nth-child(2){border-left: solid 1px #E9E9;border-right: solid 1px #E9E9E9;}main>div{position: absolute;width: 100%;height: 100%;font-size: 5em;transform: translateY(-100%);transition-duration: 1s;}main>div:target{/*: target pseudo-class is the div that is clicked after the a link is set*/transform: translateY(0);z-index: 2;}main>div:nth-child(1):target{background-color: #008000;}main>div:nth-child(2):target{background-color: #495A80;}main>div:nth-child(3):target{background-color: #FFF00;}The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.