javascript - poner - como hacer un enlace en html a otra pagina

Cambiar el color del enlace de la página actual con CSS (11)

JavaScript hará el trabajo.

Obtenga todos los enlaces en el documento y compare sus URL de referencia con la URL del documento. Si hay una coincidencia, agregue una clase a ese enlace.

JavaScript

<script> currentLinks = document.querySelectorAll(''a[href="''+document.URL+''"]'') currentLinks.forE‌ach(function(link) { link.className += '' current-link'') }); </script>

One Liner Version of Above

document.querySelectorAll(''a[href="''+document.URL+''"]'').forE‌ach(function(elem){e‌lem.className += '' current-link'')});

CSS

.current-link { color:#baada7; }

Otras notas

La respuesta jQuery de Taraman anterior solo busca en [href] que arrojará etiquetas de link y etiquetas distintas de las que se basan en el atributo href . Al buscar en a[href=''*https://urlofcurrentpage.com*''] solo se capturan los enlaces que cumplen los criterios y, por lo tanto, se ejecutan más rápido.

Además, si no necesita confiar en la biblioteca de jQuery, una solución de JavaScript vainilla es definitivamente el camino a seguir.

¿Cómo se vincula un estilo para la página actual de manera diferente a los demás? Me gustaría cambiar los colores del texto y el fondo.

HTML:

<ul id="navigation"> <li class="a"><a href="/">Home</a></li> <li class="b"><a href="theatre.php">Theatre</a></li> <li class="c"><a href="programming.php">Programming</a></li> </ul>

CSS:

li a{ color:#A60500; } li a:hover{ color:#640200; background-color:#000000; }

@Presto ¡Gracias! La tuya funcionó perfectamente para mí, pero se me ocurrió una versión más simple para ahorrar y cambiar todo.

Agregue una etiqueta <span> alrededor del texto del enlace deseado, especificando la clase dentro de. (por ejemplo, etiqueta de inicio)

<nav id="top-menu"> <ul> <li> <a href="home.html"><span class="currentLink">Home</span></a> </li> <li> <a href="about.html">About</a> </li> <li> <a href="cv.html">CV</a> </li> <li> <a href="photos.html">Photos</a> </li> <li> <a href="archive.html">Archive</a> </li> <li> <a href="contact.html">Contact</a></li> </ul> </nav>

Luego edite su CSS en consecuencia:

.currentLink { color:#baada7; }

Con jQuery puede usar la función .each para recorrer los enlaces con el siguiente código:

$(document).ready(function() { $("[href]").each(function() { if (this.href == window.location.href) { $(this).addClass("active"); } }); });

Dependiendo de la estructura de su página y de los enlaces utilizados, puede que tenga que restringir la selección de enlaces como:

$("nav [href]").each ...

Si está utilizando parámetros de URL, puede ser necesario quitarlos:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

De esta manera, no tiene que editar cada página.

Entonces, por ejemplo, si está tratando de cambiar el texto del ancla en la página actual en la que está utilizando solo CSS, entonces aquí hay una solución simple.

Quiero cambiar el color del texto de ancla en mi página de software a azul claro:

<div class="navbar"> <ul> <a href="../index.html"><li>Home</li></a> <a href="usefulsites.html"><li>Useful Sites</li></a> <a href="software.html"><li class="currentpage">Software</li></a> <a href="workbench.html"><li>The Workbench</li></a> <a href="contact.php"><li>Contact</a></li></a> </ul> </div>

Y antes de que alguien diga que tengo las etiquetas <li> y las <a> etiquetas mezcladas, esto es lo que hace que funcione, ya que está aplicando el valor al texto solo cuando está en esa página. Desafortunadamente, si usa PHP para ingresar etiquetas de encabezado, esto no funcionará por razones obvias. Luego puse esto en mi style.css , con todas mis páginas usando la misma hoja de estilo:

.currentpage { color: lightblue; }

Es posible lograr esto sin tener que modificar cada página individualmente (agregando una clase ''actual'' a un enlace específico), pero aún sin JS o un script del lado del servidor. Utiliza el pseudo selector de destino , que se basa en #someid aparece en la barra de direcciones.

<!DOCTYPE> <html> <head> <title>Some Title</title> <style> :target { background-color: yellow; } </style> </head> <body> <ul> <li><a id="news" href="news.html#news">News</a></li> <li><a id="games" href="games.html#games">Games</a></li> <li><a id="science" href="science.html#science">Science</a></li> </ul> <h1>Stuff about science</h1> <p>lorem ipsum blah blah</p> </body> </html>

Hay un par de restricciones:

Si la página no fue navegada para usar uno de estos enlaces, no tendrá color;
Los identificadores deben aparecer en la parte superior de la página, de lo contrario, la página saltará un poco cuando se visiten.

Siempre que los enlaces a estas páginas incluyan la identificación, y la barra de navegación esté en la parte superior, no debería ser un problema.

Otros enlaces dentro de la página (marcadores) también causarán la pérdida del color.

La mejor y más fácil solución:

Para cada página que desee que su respectivo enlace cambie de color hasta que se cambie, coloque un estilo interno en CADA PÁGINA para el atributo VISITADO y convierta cada una de ellas en una clase individual para diferenciar entre enlaces para que no aplique la función a todos accidentalmente. Usaremos blanco como ejemplo:

<style type="text/css"> .link1 a:visited {color:#FFFFFF;text-decoration:none;} </style>

Para todos los demás atributos, como LINK, ACTIVE y HOVER, puede conservarlos en su style.css. Deberá incluir allí VISITADO para el color al que desea que vuelva el enlace cuando haga clic en un enlace diferente.

La respuesta de N 1.1 es correcta. Además, he escrito una pequeña función de JavaScript para extraer el enlace actual de una lista, lo que le ahorrará la molestia de modificar cada página para conocer su enlace actual.

<script type="text/javascript"> function getCurrentLinkFrom(links){ var curPage = document.URL; curPage = curPage.substr(curPage.lastIndexOf("/")) ; links.each(function(){ var linkPage = $(this).attr("href"); linkPage = linkPage.substr(linkPage.lastIndexOf("/")); if (curPage == linkPage){ return $(this); } }); }; $(document).ready(function(){ var currentLink = getCurrentLinkFrom($("navbar a")); currentLink.addClass("current_link") ; }); </script>

incluir esto! en su página donde desea cambiar los colores guardar como .php

<?php include("includes/navbar.php"); ?>

luego agrega un nuevo archivo en una carpeta incluye.

includes/navbar.php <div <?php //Using REQUEST_URI $currentpage = $_SERVER[''REQUEST_URI'']; if(preg_match("/index/i", $currentpage)||($currentpage=="/")) echo " class=/"navbarorange/*the css class for your nav div*//" "; elseif(preg_match("/about/*or second page name*//i", $currentpage)) echo " class=/"navbarpink/" "; elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage)) echo " class=/"navbargreen/" ";?> > </div>

a:active : cuando hace clic en el enlace y lo mantiene ( ¡activo! ).
a:visited : cuando el enlace ya ha sido visitado.

Si desea que se resalte el enlace correspondiente a la página actual, puede definir un estilo específico para el enlace:

.currentLink { color: #640200; background-color: #000000; }

Agregue esta nueva clase solo al li (enlace) correspondiente, ya sea en el lado del servidor o en el lado del cliente (usando JavaScript).

a:link -> Define el estilo para los enlaces no visitados.

a:hover -> Define el estilo de los enlaces de navegación.

Un enlace se mantiene cuando el mouse se mueve sobre él.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <style type="text/css"></style> </head> <body style="background:#000000 url(''...../images/bg.jpg'') repeat-y top center fixed; width="100%" align="center"> <table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr> <td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle"> <span class="class1" id="nav_menu"> <a href="http://Yourhomepage-url.com/" ***class="current"*** target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>  Home  </b></font></a>    <a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>  FAQs page  </b></font></a>    <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>  About  </b></font></a>    <a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>  Contact  </b></font></a> </span> </td></tr></table></body></html>

Nota: el estilo va entre la etiqueta principal ( <head> .... </head> ) y la clase = "class1" y el id = "nav_menu" va en el ejemplo: (- <span class="class1" id="nav_menu"> -).

Entonces, el último atributo de clase ( clase = "actual" ) va en el código de hipervínculo del enlace en la página a la que desea que se corresponda el enlace activo actual.

Ejemplo: Desea que la pestaña del enlace permanezca activa o resaltada cuando su página corresponsal es la que está actualmente a la vista, vaya a esa página y coloque el atributo class = "current" por su código html del enlace. Solo en la página que corresponde al enlace para que cuando esa página esté a la vista, la pestaña permanezca resaltada o se destaque de manera diferente del resto de las pestañas.

Para la página de inicio , vaya a la página de inicio y coloque la clase en ella. ejemplo: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">

Para la página Acerca de , vaya a la página sobre y coloque la clase en ella. ejemplo: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">

Para la página de contacto , vaya a la página de contacto y coloque la clase en ella. ejemplo: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">

etc ......

Observe la tabla de ejemplo anterior; supongamos que esta era la página de inicio, por lo que en esta página, solo la sección de enlace de la página de inicio tiene la clase = "actual"

Perdón por cualquier error sin significado, no soy un prof. pero esto funcionó para mí y se muestra bien en casi todos los navegadores probados, incluidos iPad y teléfonos inteligentes. Espero que esto ayude a alguien aquí porque es muy frustrante querer y no poder hacerlo. Lo había intentado, así que tuve que llegar a esto, y hasta ahora es bueno para mí.