如何实现JS onClick 点击切换效果

JavaScript020

如何实现JS onClick 点击切换效果,第1张

1、使用js动态操作元素样式

//定义onClick方法

function click(){

    document.getElementById("p1").style.display="block"

    document.getElementById("p2").style.display="none"

}

2、先写好css在onClick事件中改变元素class

.show{display:block}

.hidden{display:none} /定义onClick方法

function click(){

    document.getElementById("p1").className="show"

    document.getElementById("p2").className="hidden"

}

现在大多数列表切换都是把<div style="display:block"></div> 这个div的display设置为none或block来实现的，就是你点击一个列表的时候这个列表所要表现的div的display变为block，其他的设置为none,所以看到了这个列表的东西反之亦然