Cómo lograr el efecto de cambio de pestañas de páginas web
Crear una página de pestañas web: cree un nuevo archivo web llamado "index.html" y ábralo con un editor de texto. Debido a que planeamos usar JQuery para crear secuencias de comandos de páginas web, necesitamos introducir acceso al tiempo de ejecución de JQuery. La función importante del archivo "index.html" es presentar el marco de pestañas de la página web más básico a los usuarios. Incluye tres páginas de pestañas, cada página de pestañas incluye varios hipervínculos secundarios y, por supuesto, también puede contener otro contenido de texto. El código ingresado en el archivo. El código incluye referencias al archivo de estilo "MyStyle.css" y al archivo de script "MyJQuery.js", que mostraremos más adelante. Efecto de página web correspondiente.
A continuación, debe embellecer la página web: cree un nuevo archivo de hoja de estilos en cascada llamado "MyStyle.css" en el directorio actual y utilice este archivo para embellecer la página web. Por supuesto, otro propósito de usar CSS para embellecer es separar el contenido y la expresión de la página web, de modo que podamos centrarnos en el embellecimiento de la página web y lograr una división del trabajo y un concepto de cooperación más eficientes. El código fuente del archivo de hoja de estilo y los efectos de página web correspondientes.
Para implementar el control de script al cambiar de pestaña: cree otro archivo en el directorio actual y asígnele el nombre "MyQuery.js". La función importante de este archivo es lograr el efecto de cambio de pestañas. Cuando el mouse del usuario pasa sobre uno de los menús, el menú se resaltará y el contenido debajo del menú aparecerá lentamente y cambiará en consecuencia. Al mismo tiempo, el estado de resaltado de otras pestañas se cancelará y se restaurará al estado predeterminado. su código fuente.
Pruebe el efecto de la producción de la página web: haga doble clic en el archivo "index.html", el navegador se iniciará automáticamente y el efecto final de la etiqueta de la página web se muestra en la figura. Cuando el usuario mueve el mouse sobre uno de los menús, el menú se resaltará, el contenido debajo del menú se mostrará lentamente y cambiará en consecuencia, y el resaltado de otras pestañas se cancelará y restaurará al estado predeterminado.