El efecto es el siguiente:
La etiqueta a ejecutará primero el evento vinculado y luego ejecutará href para saltar a la página (actualización de página).
En el evento de resaltado de clic de navegación (salto de página), la interfaz confirma el objeto resaltado de acuerdo con el código digital cuando se hace clic en el primer nivel de navegación.
El evento de vinculación se ejecuta antes de que la página salte, el código digital se almacena en caché, la página se actualiza automáticamente después del salto y se obtiene el código digital en la caché.
No hay mucha tontería, solo ve al código.
La estructura principal:
navbar-item-active ':' '"> <a href="product.html"> 产品 展示 </a> </div>
<div class =" nav "@ click =" showNavbar (4) ": class = "showNavbarItem == 4? 'navbar-item-active': '' "> <a
href="cooperation.html"> 合作 案例 </a> </div>
<div class = "nav" @ click = "showNavbar (5)": class = "showNavbarItem == 5? 'navbar-item-active': ''"> <a
href="attract.html"> 招商 加盟 < / a> </div>
<div class = "nav" @ click = "showNavbar (6)": class = "showNavbarItem == 6? 'navbar-item-active': ''"> <a
href = "solución .html "> 解决 方案 </a> </div>
</div>
página en blanco:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<meta http-equiv = "x-ua-compatible" content = "IE = edge">
<title> </title>
<link href = "css / common.css" rel = "stylesheet">
<script src = "js / vue.js" > </script>
<script src = "js / polyfill.min.js"> </script>
<script src = "js / vueComponents.js"> </script>
</head>
<body>
<div id = "root">
<vue-navbar> </vue-navbar>
<vue-footer> </vue-footer>
</div>
<script src = "js / jquery-3.1.1.min.js"> </script>
<script>
new Vue ({
el: "#root" ,
datos: {},
métodos: {},
montado: función () {
}
})
</script>
</body>
</html>
Componentes de navegación:
Vue.component ('vue-navbar', {
data: function () {
return {
showNavbarItem: 1, // página de inicio predeterminada del primer elemento resaltar
opacity_num: 1 // transparencia de navegación predeterminada es 0.1
}
},
métodos: {
showNavbar: function ( index) {
if (index) {
sessionStorage.setItem ("showNavbarItem", index);
this.showNavbarItem = index
} else {
this.showNavbarItem = sessionStorage.getItem ("showNavbarItem");
}
},
handleScroll: function () {
/ / Con la distancia de desplazamiento de la página, la transparencia del color de fondo de navegación aumenta gradualmente
this.winPos = $ (window) .scrollTop (); // La altura de desplazamiento desde la parte superior
if (this.winPos == 0) {
this.opacity_num = 1
} else if (this.winPos> 0 && this.winPos <200) {
this.opacity_num = 3
} else if (this.winPos> = 200 && this. winPos <300) {
this.opacity_num = 6
} else if (this.winPos> = 300) {
this.opacity_num = 10
}
},
},
montado: function () {
window.addEventListener ('scroll', this.handleScroll) ;
this.showNavbar ();
},
plantilla: `<div class =" navbar ": class =" 'bg_opacity _' + opacity_num "> <div class =" logo "> <img src =" img / logo.png "alt =" logo "> </div> <div class = "nav" @ click = "showNavbar (1)": class = "showNavbarItem == 1? 'navbar-item-active': ''"> <a href="index.html"> 首页 </ a> </div> <div class = "nav" @ click = "showNavbar (2)": class = "showNavbarItem == 2? 'navbar-item-active': ''"> <a href = "acerca de. html "> 关于 我们 </a> </div> <div class =" nav "@ click =" showNavbar (3) ": class =" showNavbarItem == 3? 'navbar-item-active': '' "> <a href="product.html"> 产品 展示 </a> </div> <div class = "nav" @ click = "showNavbar (4)": class = "showNavbarItem == 4? 'navbar-item-active': ''"> <a href="cooperation.html"> 合作 案例 </ a> </div> <div class = "nav" @ click = "showNavbar (5)": class = "showNavbarItem == 5? 'navbar-item-active': ''"> <a href = "atraer. html "> 招商 加盟 </a> </div> <div class =" nav "@ click =" showNavbar (6) ": class =" showNavbarItem == 6? 'navbar-item-active': '' "> <a href="solution.html"> 解决 方案 </a> </div> </div> `/ div> <div class = "nav" @ click = "showNavbar (5)": class = "showNavbarItem == 5? 'navbar-item-active': ''"> <a href="attract.html">招商 加盟 </a> </div> <div class = "nav" @ click = "showNavbar (6)": class = "showNavbarItem == 6? 'Navbar-item-active': ''"> <a href = "solución.html"> 解决 方案 </a> </div> </div> `/ div> <div class = "nav" @ click = "showNavbar (5)": class = "showNavbarItem == 5? 'navbar-item-active': ''"> <a href="attract.html">招商 加盟 </a> </div> <div class = "nav" @ click = "showNavbar (6)": class = "showNavbarItem == 6? 'Navbar-item-active': ''"> <a href = "solución.html"> 解决 方案 </a> </div> </div> `Solución </a> </div> </div> `Solución </a> </div> </div> `
})
estilo:
/ * Estilo de navegación del encabezado * /
/ * El desplazamiento horizontal en pantallas pequeñas entra en conflicto con el fijo vertical fijo. Cuando el fijo fijo vertical no admite el desplazamiento horizontal cuando la pantalla se reduce * /
div.navbar {
/ * ancho mínimo: 1220px; * /
/ * max-width: 1920px; * /
width: 100%;
height: 64px;
line-height: 64px;
display: flex;
flex-direction: row;
justify-content: center;
position: fixed;
/ * position: absoluta ; * /
/ * arriba: 0; * /
/ * izquierda: 0; * /
z-index: 2;
tamaño de fuente: 18px;
color: #fff;
}
.bg_opacity_1 {
background: rgba (26,26,26, 0.1);
}
.bg_opacity_3 {
fondo: rgba (26,26,26,0.3);
}
.bg_opacity_6 {
background: rgba (26,26,26,0.6);
}
.bg_opacity_10 {
background: rgba (26,26,26,1);
}
@media (min-width: 1920px) {
div.logo {
margin-right: 380px ;
}
}
div.logo img {
width: 180px;
height: 48px;
vertical-align: middle;
}
/ * Navegación fijada para adaptarse al espaciado de pantalla pequeña usando porcentaje * /
div.nav {
margin-right: 2.5%;
margin -izquierda: 2.5%;
}
div.nav a: hover {
color: # afd334;
}
.navbar-item-active {
color: # afd334;
border-bottom: 3px solid # afd334;
}
div.nav a {
text-decoration: none;
display: block;
width: 100%;
color: heredar;
}
/ * Fin del estilo de navegación * /