其他回答(2)
你可以把博客园首页左侧分类的源代码复制出来，把主要的代码找出来，再写出自己想要的效果呗
园豆：1717
artwl的JQuery是可以的，如果你想看原生js的写法，我算补充一下吧，可以看看。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" &
&title&Untitled Page&/title&
&style type="text/css"&
.sider{ width:965 margin:0}
.sider ul{ width:100 float: border:4px solid # margin:0 padding:0 margin-right:10}
.rigt{ width:450 height:66 float: border:4px solid #}
&script type="text/javascript"&
//&![CDATA[
(function () {
function de(id) {
if (typeof id == "string") {
id = doc.getElementById(id);
var li = id.getElementsByTagName("li");
var ri = document.getElementById("ri");
for (var i = 0; i & li. i++) {
li[i].onclick = function () {
if (window.XMLHttpRequest) {
var moz_text = this.textC
ri.textContent = moz_
var text = this.innerT
ri.innerHTML =
window.onload = function () {
de("dell");
&div class="sider"&
&ul id="dell"&
&li&&a href="/"&&span &&/span&我的首页&/a&&/li&
&li&&a href="/"&&span &&/span&我的博客&/a&&/li&
&li&&a href="/"&&span &&/span&我的心情日记&/a&&/li&
&div class="rigt" id="ri"&&/div&
收获园豆：5
&&&您需要以后才能回答，未注册用户请先。收藏，12k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我的页面是有两个div控件分别是
&div id="test-1000"&&/div&
&div id="test-1111"&&/div&
针对上面单个的div点击时间的jquery源码是：
$('#test-1000').click(function(){});
但是怎么样用一个类似上面的语句实现两个div的点击事件都能监控到，并且，怎么区分是哪个div的点击事件？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
$('div[id^="test-"]').click(function(){});
获取所有 id 已 test- 开头的 div 元素。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
$('div[id^="test-"]').click(function(){
console.log('clicked div:', this);
获取所有 id 以 test- 开头的 div 元素，并在点击时打印出被点击的 HTMLElement。要获得 jQuery 对象，用 $(this)。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&div id="test-1000" class="foo"&&/div&
&div id="test-1111" class="foo"&&/div&
$('.foo').click(function(){
console.log('clicked div:', $(this).attr("id"));
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
$('#test-1000,#test-1111').click(function(){});
像这样也行，用逗号列出需要设置click的元素
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果在 callback 裡會使用到 id 值的話，或許可以考慮這樣
&div class="test" data-id="1000"&&/div&
&div class="test" data-id="1111"&&/div&
JavaScript:
$(document).
on('click', '.test', function() {
var id = $(this).data('id');
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
$("#{$GET['autopenbox']}{$GET['cid']}").trigger("click");
$("#{$GET['autopenbox']}{$GET['cid']}").trigger("click");
$("#{$GET['autopenbox']}{$GET['cid']}").trigger("click");
爱点多少点多少
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知您的位置： >
点击左侧图标弹出可关闭的DIV层jQuery版
点击左侧图标弹出可关闭的DIV层jQuery版
　　点击左侧图标弹出可关闭的DIV层jQuery版，隐藏在左侧的弹性弹出菜单，从淘宝扣下来的，也可作为JAvaScript缓冲动画的典型教程。本弹性菜单可扩展性强，实际上不光可以做成菜单，也可布局一些图文混排的内容或一段视频，总之被弹出的内容是在一段Div内，怎么布置就看你的了。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示
　　网页演示：
　　运行演示：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gbk& /&
&title&隐藏在左侧的弹性弹出菜单 - Liehuo.Net&/title&
&script type=&text/javascript& src=&/uploads/common/js/jquery-1.3.2.js&&&/script&
&script language=&javascript&&
$(function(){
$(&#clickopen&).click(function(){
var offset=$(&#clickopen&).offset().
$(&#page&).css(&top&,offset+&px&);
$(&#clickopen&).hide();
$(&#page&).animate({
width: &400px&,
height: &400px&,
left: ($(&body&).width()/2-200)+&px&,
top: (offset-100)+&px&,
opacity: 'toggle'
$(&#closepage&).click(function(){
var offset=$(&#page&).offset().
$(&#page&).animate({
width: &0px&,
height: &0px&,
left: &0px&,
top: (offset+100)+&px&,
opacity: 'toggle'
$(&#clickopen&).show();
//烈火W liehuo.net 欢迎复制,拒绝恶意采集 ｌｉｅｈｕｏ．ｎｅｔ
body{text-align:font-size:12color:#333;font-family:&宋体&;background:#margin:0padding:0;}
body & div{text-align:margin-right:margin-left:}
div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:12font-weight:400;margin:0;padding:0;}
ul,ol,li{list-style:}
td{word-break:break-}
a{color:#003cc8;text-decoration:}
a:hover{text-decoration:color:}
.f_tahoma{font-family:T}
em,i{font-style:}
.ask{overflow:position:left:0top:200z-index:2}
.leftButton{background:width:20height:80text-align:line-height:20display:color:# }
.content{background:#999;width:800height:2000margin:0 auto}
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:}
.ask{_position:_bottom:_left:0;_top: expression(documentElement.scrollTop + 200 + &px&);}
.page{width:0 position:height:0left:0;top:0z-index:1;overflow:display:none}
.page div{border:1px solid #000;overflow:width:398px}
.page h1{height:40text-align:font-size:20color:#background:line-height:40px}
.page h1 a{float:color:#000;margin-top:-15px}
.page p{padding:10line-height:22font-size:14text-align:background:#height:400width:378px}
&div class=&ask&&
class=&leftButton& href=&#& id=&clickopen&&点击弹出&/a&
&div class=&content&&&/div&
&div class=&page& id=&page&&
&h1&&a href=&#& id=&closepage&&x&/a&欢迎光临 &/h1&
&p&烈火网以提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习平台&&&/p&
&/html&&br /&&center&如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：&a href='/' target='_blank'&/&/a&&/center&提示：可修改后代码再运行!
上一篇： 下一篇：