html怎么设置区块隐藏,网页区块隐藏/显示的切换技术

无标题文档

.con{ width:960px; margin:0 auto}

.A,.B,.C{ width:400px; height:200px; background:#F93; border-radius:8px; padding:50px;}

.A{ display:block}

.B,.C{ display:none}

.a,.b,c{ float:left; width:50px;}

$(function(){

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

$(".A").show();

$(".B").hide();

$(".C").hide(); })

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

$(".B").show();

$(".A").hide();

$(".C").hide(); })

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

$(".C").show();

$(".B").hide();

$(".A").hide();

})

})

循环A

循环B

循环C

a

b

c

以上代码保存为html即可看到如下界面：

收藏这个代码主要原因是：原理一目了然，浅显易懂。引用jquery，然后js判断，当a被点击时，显示A，隐藏B,C；当b被点击时，显示B，隐藏A,C；当C被点击时，显示C，隐藏A,B。

若你想把点击效果改成悬停效果，那么就把以上js中的click都改成hover即可。