Bloqueo de una opción de una lista HTML

[skyz]

Saludos comunidad tengo la siguiente duda:

Tengo una lista en Html con varias opciones:

Código HTML:

<ul>
    <li><a href="Opcion1.php">Opcion 1</a></li>
    <li><a href="Opcion2.php">Opcion 2</a></li>
    <li><a href="Opcion3.php">Opcion 3</a></li>
</ul>
 

Use varios estilos css, para que tengan la forma de un menu, como se muestra en el siguiente enlace: http://www.cristalab.com/tutoriales/...-listas-c130l/

Mi duda es cuando presione en Opcion 1, como hago para que al ingresar a la pagina Opcion1.php la Opcion 1 se bloquee (La opcion 1 de la lista), como cuando se bloquea un boton html.

Se puede realizar dicho efecto?

Gracias por su tiempo.

[pzin]

Si con bloquear te refieres a no poder seguir el enlace, entonces deberías de quitar el enlace.

[skyz]

Iniciado por pzin

Si con bloquear te refieres a no poder seguir el enlace, entonces deberías de quitar el enlace.

Cierto podria hacerlo esa parte con lenguaje de parte del servidor (cuando ingrese a la pagina Opcion1.php) que muestre :

Código HTML:

<ul>
    <li><a href="#">Opcion 1</a></li>
    <li><a href="Opcion2.php">Opcion 2</a></li>
    <li><a href="Opcion3.php">Opcion 3</a></li>
</ul>
 

Bueno pero tambien quisiera que con css, ese boton que ahora le quite el enlace, ya no me muestre la manito, cuando el puntero del mouse este sobre el y tambien tenga un color oscuro transparente, dando la apariencia de un boton desabilitado.

Gracias.

[pzin]

Lo correcto sería quitar el enlace, no el sólo el atributo href del enlace.

Si quieres hacerlo como dices, sólo tendría que poner:

Código CSS:

cursor: default;
 

Aunque pinchando en el enlace seguiría yendo al enlace.

Yo cambiaría ese a por un span y lo añadiría al selector de estilos para que esté igual, y creas otra regla para los estilos que quieras cambiar.

[skyz]

Iniciado por pzin

Lo correcto sería quitar el enlace, no el sólo el atributo href del enlace.

Lo hare asi, lo analice mal

Iniciado por pzin

Si quieres hacerlo como dices, sólo tendría que poner:

Código CSS:

cursor: default;
 

Aunque pinchando en el enlace seguiría yendo al enlace.

Yo cambiaría ese a por un span y lo añadiría al selector de estilos para que esté igual, y creas otra regla para los estilos que quieras cambiar.

Osea voy a tener mi lista asi, luego de manipularla con lenguaje de servidor:

Código HTML:

<ul>
        <li><div id=efecto>Opcion 1</div></li>
        <li><a href="Opcion2.php">Opcion 2</a></li>
        <li><a href="Opcion3.php">Opcion 3</a></li>
</ul>
 

Anteriormente la Opcion 1 tendria que estar en un div, en el cual aplique el efecto de:

Código CSS:

cursor: default;
 

.

donde tendria que colocar el la etiqueta span?, no lo entendi muy bien, gracias

[ArturoGallegos]

Código HTML:

<li><span>Opcion 1</span></li>
 

la intención del span es que tenga los mismos estilos que el <a> para que no descuadre el menú, igual puedes agregarle un color diferente para diferenciarlo del resto

[pzin]

Algo así decía yo. Aplicas el span —porque es un elemento parecido a un enlace, ya que es en linea y no en bloque:

Código HTML:

<ul>
  <li><span>Opcion 1</span></li>
  <li><a href="Opcion2.php">Opcion 2</a></li>
  <li><a href="Opcion3.php">Opcion 3</a></li>
</ul>
 

Luego le aplicas los mismos estilos que a los enlaces, pero para no volver a escribir esos estilos, simplemente cambias tu selector de —es un ejemplo, no sé cómo lo tienes:

Código CSS:

ul li a {
  padding: 10px;
  color: white;
  background: black;
}
 

A algo así:

Código CSS:

ul li a, ul li span {
  padding: 10px;
  color: white;
  background: black;
}
 

Y luego pones otra regla para los estilos que quieres cambiarle:

Código CSS:

ul li span {
  background: grey;
}