简易JS-CSS选项卡及对应内容展示-style .active{background-color: #2596FB;color:#fff;cur...

首页>> js >>简易JS-CSS选项卡及对应内容展示

2022-7-21

分类： js

简易JS-CSS选项卡及对应内容展示

文章作者：清风

<style>

.active{background-color: #2596FB;color:#fff;cursor: pointer;}

.active2{cursor: pointer;}

</style>

function showTab(name,cursel,n){

for(i=1;i<=n;i++){

var tab=document.getElementById(name+i);

var dis=document.getElementById(name+"_"+i);

tab.className=i==cursel?"active":"active2";

dis.style.display=i==cursel?"block":"none";

}

</script>

<ul class="Right">
	<li id="m1" class="active" onclick="showTab('m',1,4)">认证资讯</li>
	<li id="m2" onclick="showTab('m',2,4)">国际新闻</li>
	<li id="m3" onclick="showTab('m',3,4)">公示公告</li>
	<li id="m4" onclick="showTab('m',4,4)">常见问题</li>
	</ul>