如何通过外部链接改变标签的CSS

Question

如何通过外部链接改变标签的CSS

javascriptcsstogglevisibility

37

我有一个标签为sf-menu的菜单。

当链接被点击时，我需要能够将其可见性更改为none，再次点击时切换回来。

我该只用CSS实现这一点还是需要JavaScript的帮助？

希望有人能举个例子来帮助我。

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

- Erik

1

你可以使用CSS做到这一点。:target伪选择器是仅使用CSS实现它的唯一方法。您可以从这里查看详细信息。https://css-tricks.com/on-target/ - ebilgin

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 7urkm3n · Answer 1

很遗憾，CSS目前还没有这个功能。

JQuery可以为您完成，在两行代码中。

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

- Emad Morris Zedan · Answer 2

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
     }
  });
});