CSS怎么在点击a标签是显示东西

html-css012

CSS怎么在点击a标签是显示东西,第1张

css：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。能够做到网页表现与内容分离的一种样式设计语言。

但是想要有交互特效，比如点击、拖曳、失焦、聚焦等特效都是需要结合js、jq来实现的。因此没办法做到点击a标签达到显示a内部其他dom内容。

不过css有个hover能实现鼠标移动到a标签上展示其下内容。比如最常见的鼠标经过展示下拉框，使用纯css就能达到，主要原因就是使用hover经过将下面的ul.submenu给显示出来

例如

<a href="#" id="a1">xxx

<ul style="display:none/*一开始是隐藏的，为了说明直接写在节点上*/">

<li><a href="#">111</a></li>

......

</ul>

</a>

css:

#a1:hover ul{ display:block/*鼠标经过将ul显示出来*/}

HTML：

<p class="p">基础</p>

<div class="show">

<ul>

<li><a href="#">aa</a></li>

<li><a href="#">ss</a></li>

<li><a href="#">dd</a></li>

<li><a href="#">ff</a></li>

<li><a href="#">gg</a></li>

</ul>

</div>

css:

.show{

display:none

}

js:

var isClick=true

$(".p").click(function(){

if(isClick){

$(".show").css("display","block")

isClick=false

}else{

$(".show").css("display","none")

isClick=true

}

})

思路，

要显示的内容用一个div包住，当你点击基础的时候，div显示，再点击时div隐藏