JS列表切换效果如何实现?

JavaScript024

JS列表切换效果如何实现?,第1张

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

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"

}

好。

1、效果方面：js编写城市选项切换效果一款JS版网页顶部向下滑出的城市切换导航，仿sohu团购网页顶部的城市导航切换，从顶部向下滑出，效果非常好。

2、范围方面：js编写可以随时查看，应用范围广，方便在其他城市之间切换。