javascript - pagina - href html ejemplos

Cómo cambiar css de etiqueta desde un enlace externo

Question

Tengo un menú en una etiqueta llamada sf-menu .

Necesito la visibilidad para cambiar a none cuando se hace clic en el enlace y se alterna cuando se vuelve a hacer clic.

¿Puedo lograr esto solo con CSS o necesito JavaScript?

Esperando que alguien me pueda ayudar con un ejemplo.

.sf-menu {visibility: visible}
<a class="closed" href="#sidewidgetarea"> Switch</a>

Answer 1

1. Puede usar input type = ''checkbox'' para ello:

http://jsfiddle.net/gSPqX/1/

<input type="checkbox" style="display: none" id="cb">
<label for="cb">Click Here</label>
<div>
    Hello. This is some stuff.
</div>

2. Una solución más mejor usando :target

#menu .menu{
   display:none; 
}
#menu:target  .menu{
    display: block;
}

#menu:target .menu__open{
    display: none;
}
#menu .menu__close{
    display: none;
}
#menu:target .menu__close{
    display: block;
}

<div id="menu">
    <a href="#menu" class="menu__open">Open menu</a>
    <a href="#" class="menu__close">Close menu</a>
    <div class="menu">
        Hello. This is some stuff.
    </div>
</div>

Answer 2

Aquí hay una solución súper simple en jQuery, usando las etiquetas que ha mencionado. ¡Pero primero elimine su fila de CSS!

Tenga en cuenta que este ejemplo no parece ejecutarse en .com, pero funciona bien en jsfiddle.net.

$(''.closed'').click(function(){
    $(''.sf-menu'').toggle();
});

<a class="closed" href="#sidewidgetarea">Switch</a>
<div class="sf-menu">The menu</div>

Answer 3

CSS:

.myVisibleLink{
     display:block;
}
.myHiddenLink{
     display:none;
}

Jquery:

var myFlag = false;
$(function() {                       //run when the DOM is ready
  $("#IDOfLink").click(function() {  //use a class, since your ID gets mangled
      if(myFlag == false){    
           myFlag = true;
           $(this).addClass("myHiddenLink");      //add the class to the clicked element
      }else{
           myFlag = false;
           $(this).addClass("myVisibleLink");      //add the class to the clicked element
     }
  });
});

Answer 4

Desafortunadamente, CSS aún no tiene esa función.

JQuery puede hacer por usted, en dos líneas de código.

$(''.button'').click(function(){
   $(''.sf-menu'').toggle();
});

Answer 5

En HTML:

<h1 class="sf-menu"> TestText </h1>

JavaScript:

 var sfmenu = document.getElementsByClassName("sf-menu");
sfmenu[0].onclick = function () {
    if (this.style.display == ''none'' ) {
        this.style.display = '''';
    } else {
        this.style.display = ''none'';
    }
};

Answer 6

Me gusta la útil solución "checkbox" en las respuestas, pure CSS. Sin embargo, si necesita que el enlace esté involucrado, puede intentar utilizar el atributo onclick en el código HTML del enlace.

#sf-menu {
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

<div id="#sidewidgetarea">
  <a class="closed" href="#sidewidgetarea"
     onclick="with(document.getElementById(''sf-menu'').style){
              visibility=(visibility===''visible''&&!(opacity=0)&&''hidden'')
              ||((opacity=1)&&''visible'')}"
     >Switch</a>

  <ul id="sf-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Answer 7

Puede lograr esto con Javascript puro.

Use el evento onclick para la etiqueta de anclaje.

function OnsidewidgetareaClick()
{
 var elementObj = document.getElementsByClassName("sf-menu")[0];
  
  if (elementObj.style.display == ''block'' ||elementObj.style.display=='''')
    {
        elementObj.style.display = ''none'';
    }
    else 
    {
        elementObj.style.display = ''block'';
    }
 
}

.sf-menu {visibility: visible}

<a class="closed" href="#sidewidgetarea" onclick="OnsidewidgetareaClick();"> Switch</a>

<div class="sf-menu">
  This is the .sf-menu element.
</div>

Answer 8

Puedes hacerlo usando solo CSS. El truco consiste en dejar un rastro en el que se pueda hacer clic y funcionar como un interruptor / botón para encender o apagar la pantalla. Puede lograr eso envolviendo su contenido necesario para ser cambiado a algún div o cualquier otro elemento adecuado para usted.

Aquí hay un pequeño ejemplo para eso.

label {
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}

<label for="menu-toggle">Click me to toggle menu</label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
  <li><a href="#">First link</a></li>
  <li><a href="#">Second link</a></li>
  <li><a href="#">Third link</a></li>
</ul>

Answer 9

Si está utilizando jquery, puede usar jquery.toggle ()

Ejemplo:

$(".closed").click(function(event) {
    event.stopPropagation()
    $(".sf-menu").toggle();
});

Fuente: https://api.jquery.com/toggle/

Answer 10

Si puede editar el DOM, existe una solución PureCSS (ver a continuación), pero creo que la mejor solución es usar Javascript, ¡jQuery le ofrece una solución de navegador cruzado!

Hope ayuda !!

var HIDDEN_CLASS = ''sf-menu-hidden'';


/** jQuery **/
jQuery(document).ready(function($) {
  $(''#jQueryTest .closed'').click(function closeWithJQuery(event) {
    event.preventDefault();
    $(''#jQueryTest .sf-menu'').toggleClass(HIDDEN_CLASS);
  });
});


/** VanillaJS **/
document.addEventListener("DOMContentLoaded", function(event) {
  document
  .querySelector(''#VanillaJSTest .closed'')
  .addEventListener(''click'', function() {
    var el = document.querySelector(''#VanillaJSTest .sf-menu'');
    var task = el.classList.contains(HIDDEN_CLASS) ? ''remove'' : ''add'';
    
    el.classList[task](HIDDEN_CLASS);
  });
});

* {
  -webkit-user-select: none;
  user-select: none;
}

.sf-menu-hidden {
  visibility: hidden;
}

a, label {
  cursor: pointer;
}

article + article {
  margin-top: 10px;
  border-top: 1px solid green;
}

#PureCSSTest [type="checkbox"] {
  display: none;
}

#PureCSSTest [type="checkbox"]:checked + .sf-menu {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article id="jQueryTest">
  <h1>Test jQuery</h1>
  <a class="closed">TOGGLE MENù</a>
  <div class="sf-menu">
    <ul>
      <li> Hey I Am On THE SCREEN</li>
    </ul>
  </div>
</article>


<article id="VanillaJSTest">
  <h1>VanillaJS</h1>
  <a class="closed">TOGGLE MENù</a>
  <div class="sf-menu">
    <ul>
      <li> Hey I Am On THE SCREEN</li>
    </ul>
  </div>
</article>


<article id="PureCSSTest">
  <h1>PURE CSS</h1>
  <a class="closed"><label for="toggleClosed">TOGGLE MENù</label></a>
  <input type="checkbox" id="toggleClosed">
  <div class="sf-menu">
    <ul>
      <li> Hey I Am On THE SCREEN</li>
    </ul>
  </div>
</article>

Answer 11

Tal vez esto pueda ser útil. Usar esto ocultará tu menú al hacer clic y luego según tu requerimiento eliminar o agregar clase luego.

#sf-menu:active{
    display:none;
}

Answer 12

#checkbox1 {
  display:none;
}

#checkbox1:checked ~ .sf-menu {
  visibility: visible;
}

.sf-menu {
  visibility:hidden;
}

.pseudo-link {
  cursor: pointer;
}

<div>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1"" class="pseudo-link>The link</label>
  <ul class="sf-menu">
     <li> item 1</li>
     <li> item 2</li>
     <li> item 3</li>
  </ul>
</div>

No se requiere javascript La etiqueta se tratará como si fuera un enlace a través de css.