jquery实现"标题内容交替显示"

2012-12-25 09:12 8896 次阅读分类: JS+jQuery, 前端相关 2 条评论

免打扰阅读

实现效果：

(初始状态：默认只显示所有标题，所有标题对应内容都不显示)
点击标题再显示该标题对应的内容，其它之前点开的内容，自动恢复只显示标题的状态;
点击该内容一链接能关闭该内容所在层并恢复只显示标题的状态;

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> * { margin:0; padding:0; } body { font:12px/20px Tahoma, Geneva, sans-serif; padding:100px;} ul li { list-style:none; } img { border:0 none;} a{ outline:0;} .tc{ text-align:center;} .none{display:none;} /*实例演示层固定样式*/ #cnt1,#cnt2,#cnt3{ display: none;} </style> </head> <body> <ul> <li><a href="javascript:;" id="tit1" onclick="action(this,1);">标题1</a> <div id="cnt1">标题1对应的内容 <a href="#" class="recover">关闭内容，显示标题</a></div> </li> <li><a href="javascript:;" id="tit2" onclick="action(this,2);">标题2</a> <div id="cnt2">标题2对应的内容 <a href="#" class="recover">关闭内容，显示标题</a></div> </li> <li><a href="javascript:;" id="tit3" onclick="action(this,3);">标题3</a> <div id="cnt3">标题3对应的内容 <a href="#" class="recover">关闭内容，显示标题</a></div> </li> </ul> <script type="text/javascript"> function action(obj,num){ var _this=obj; var total=3; //$(_this).hide(); for(var i=1;i<=total;i++){ if(i==num){ $("#tit"+num).hide(); $("#cnt"+num).show(); $(".recover",$("#cnt"+num)).click(function(){ $("#tit"+num).show(); $("#cnt"+num).hide(); }) }else{ $("#tit"+i).show(); $("#cnt"+i).hide(); } } } </script> </body> </html>

提示：你可以先修改部分代码再运行。

值得说明的是，标题及内容对应的标签位置都是随意的，无固定位置限制，换句话，标题及内容标签你可以随意摆放在页面的任意位置，效果依旧！