无标题文档

.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

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

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

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

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

在html如何将链接隐藏,网页查看隐藏链接的方法和检测工具（附：网站链接隐藏的方法）...
通常的情况下,网页的链接是不允许被隐藏的,所以在没有必要的情况下,我们通常都不建议做隐藏链接,但是部分黑帽SEO技术员则会将链接隐藏,一来是为了不容易被别人发现,二来可以做到吸引蜘蛛的效果,那么网站隐 ...
html 状态栏显示,网页屏蔽状态栏打开的网页怎么隐藏浏览器的状态栏
打开网页,状态栏不显示怎么办网页浏览器的状态栏不见了怎么弄出来? 答;在网页浏览器里最上端,"查看"菜单下点击工具栏,勾选状态栏它就出来了 .如果还不行,那就试试重置IE浏览器. ...
html怎么将文字隐藏,教你如何用CSS实现网页文字隐藏
现在的网页设计越来越动态化,如果我们既想实现网页的动态化,又要兼顾友好搜索引擎,就不得不对网页添加一些文字,但这些文字的存在明显与我们动态网页的风格格格不入.怎么办呢?解决的方法是把这些文字进行隐藏. ...
html怎么设置取消隐藏,怎么取消wifi隐藏_取消隐藏wifi设置方法-192路由网
问:家里路由器的wifi被隐藏了,怎么把隐藏的wifi取消了,让电脑.手机可以正常搜索连接上网? 答:取消隐藏wifi的方法,实际上和设置隐藏wifi的方法是相同的,用电脑或者手机,登录到路由器的管理 ...
Saiku设置展示table数据不隐藏空的行数据信息（二十六）
Saiku设置展示table数据不隐藏空的行数据信息 saiku有个非空的字段按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
网页信息隐藏及一种方法
信息隐藏技术: 按载体的不同分为图像.视频.声音和文本等数字媒体的信息隐藏技术. 目前的研究集中在以静止图像.音频及视频为载体的数字媒体上,针对文本信息隐藏技术的研究较少.文本载体的信息冗余太少,不适 ...
设置input隐藏并用js控制显示和隐藏
style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...
html输入框不显示cookie_jquery设置浏览器缓存cookie提示内容显示隐藏
特效描述:设置浏览器缓存 cookie提示内容显示隐藏,jquery制作通过判断各种浏览器版本等,来设置各个浏览器缓存cookie,控制模块内容或区域在浏览器缓存cookie的情况下,是否显示或隐藏 ...
如何隐藏网络计算机,电脑隐藏wifi怎么设置_电脑如何设置隐藏wifi？-192路由网...
问:如何用电脑设置隐藏wifi信号(名称)? 答:需要用电脑先登录到路由器的管理页面,然后打开无线设置或者 Wi-Fi设置这个功能选项,就可以完成隐藏wifi名称的设置了.如果你是新手,建议按照 ...
css设置li隐藏,css怎么隐藏li
css隐藏li的方法:首先新建一个html文件:然后使用ul标签和li标签创建一个项目列表:接着创建一个类名为yc的样式:最后在yc样式内,将display属性设置为none即可隐藏li标签. 本文操 ...

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

循环A

循环B

循环C

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

最新文章

热门文章