本文详细介绍了如何使用HTML、CSS和JavaScript实现一个前端抽屉式的热搜榜界面，包括顶部菜单栏、左侧内容区域、右侧热点模块的布局与交互设计。通过动态展示热搜榜数据，实现点击评论、点赞、分享等功能，增强了用户体验。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>抽屉新热榜</title> <style type="text/css"> *{margin: 0;padding: 0} a{text-decoration: none} li{list-style: none} /*顶部菜单栏样式*/ #head1{height: 44px;width: 100%;background-color: #2459a2} #head1_in{height: 44px;width: 1018px;margin: 0 auto 0 ;position: relative} #head1_in_a{display: inline-block;height: 44px;margin-top: 10px} #head1_in_1{display: inline-block;position: absolute;left: 132px;font-size: 0} #head1_in_1 .a1{display: inline-block;height: 44px;width: 53px;text-align: center;line-height: 44px;font-size: 11px;color: #c0cddf} #head1_in_1 .a2{display: inline-block;height: 44px;width: 80px;text-align: center;line-height: 44px;font-size: 11px;color: #c0cddf} #head1_in_1 a:hover{background-color: rgba(192,205,223,.5) ;color: white} #head1_in_2{display: inline-block;position: absolute;right: 145px;font-size: 0} #head1_in_2_2{display: none;position: absolute;right: 145px;font-size: 0} #head1_in_2 .a3{display: inline-block;height: 44px;width: 64px;text-align: center;line-height: 44px;font-size: 11px;color: white} #head1_in_2_2 a{display: inline-block;height: 44px;width: 128px;text-align: center;line-height: 44px;font-size: 11px;color: white} #head1_in_2 a:hover{background-color: rgba(192,205,223,.5)} #head1_in_3{display: inline-block; height: 38px;width: 137px; position: absolute;right: 0;font-size: 0;margin-top: 4px} #head1_in_3 .a4{display: inline-block;height: 31px;width: 100px} #head1_in_3 .a5{display: inline-block;height: 33px;width: 33px;background-color: white} /*body主体架构*/ #body1{width: 100%;height: 100%;background-color: #ededed} #body2{width: 1018px;height: 1500px;background-color: white;margin: 0 auto 0;position: relative} #body2_l{width: 630px;height: 100%;display: inline-block;position: absolute;left: 30px;top: 10px} #body2_r{width: 300px;height: 100%;display: inline-block;position: absolute;right: 30px;top: 10px} /*body左模块顶部页签栏样式*/ #body2_l_top{width: 630px;height: 43px;border-bottom: 1px solid #c0cddf;position: relative} #body2_l_top .b1{display: inline-block; width: 190px;height: 42px;font-size: 0} #body2_l_top .b2{display: inline-block; width: 142px;height: 20px;position: absolute;right: 137px;top: 10px} #body2_l_top .b3{display: inline-block; width: 136px;height: 32px;background-color: #84a42b;text-align: center;line-height: 32px;position: absolute;right: 0;top: 5px} #body2_l_top .b1 div{display: inline-block;width: 60px;height: 42px;font-size: 11px;text-align: center;line-height: 42px;color: #369;font-weight: 700} #body2_l_top .b2 a{font-size: 8px;} #body2_l_top .b2 .b2_a1{color: #b4b4b4} #body2_l_top .b2 .b2_a2{color: #390} #body2_l_top .b3 span{color: white} #body2_l_top .b1 div,#body2_l_top .b3:hover{cursor: pointer} .item{width: 630px;height: 100%;border-bottom: 1px solid #c0cddf;position: relative} /*body左模块内容板块样式*/ .item>div{width: 100%;height: 100%;display: inline-block} .item .item_1{width: 550px;height: 100%;margin-top: 12px} .item .item_1 .item_title{font-size: 15px;color: #369;font-weight: 700} .item .item_1 .item_url{font-size: 10px;color: #b4b4b4;margin-left: 10px} .item .item_1 .item_addr{font-size: 11px;color: #b4b4b4;margin-left: 10px;text-decoration: underline} .item .item_2{width: 550px;height: 25px;margin-top: 10px;position: relative;margin-bottom: 10px} .item .little_img{display: inline-block; position: absolute;right: 0;top: 12px;width: 60px;height: 60px} .item_2 .dianzan b{color: #99aecb} .item_2 .pinglun{margin-left: 15px} .item_2 .pinglun b{color: #99aecb} .item_2 .sicang{margin-left: 25px} .item_2 .sicang b{color: #99aecb;font-size: 12px} .item_2 .user_logo{font-size: 13px;margin-left: 45px;color: #99aecb} .item_2 .time_count{font-size: 13px;margin-left: 12px;color: #b4b4b4} .item_2 .time_count .time_count_1{color: #e59373} .item_2 .time_count b{text-decoration: none} .item_2 .fenxiang{position: absolute;right: 0;bottom: -4px;} .item_title,.pinglun,.dianzan,.sicang,.user_logo,.time_count_1:hover{cursor: pointer} .item .little_img:hover{cursor: pointer} /*body右模块样式*/ #body2_r_top{width: 300px;height: 68px;position: relative} #body2_r_top .a2{position: absolute;right: 0} #body2_r_search{width: 300px;height: 30px;position: relative} #body2_r_search a{font-size: 15px; position: absolute;bottom: 0;color: #369;font-weight: 700} #body2_r_img{width: 300px;height: 202px;margin-top: 10px} #body2_r_hot{width: 300px;height: 500px;margin-top: 10px} #body2_r_hot_1{width: 300px;height: 28px;} #body2_r_hot_1 span{font-size: 15px;font-weight: 700} #body2_r_hot_1 .top10{color: #c30} #body2_r_hot_2{width: 300px;height: 35px;background-color: #2459a2;text-align: center;line-height: 35px;font-size: 11px;color: white;} #body2_r_hot_3 .top-item{width: 300px;height: 67px;border-bottom: dotted 1px gray;margin-top: 20px;font-size: 11px} #body2_r_hot_3 .top-item .top_count{display: inline-block;height: 22px;width: 32px; background-color: #f0f0f0;font-size: 12px;font-weight: 700;color: #666;text-align: center;line-height: 22px} #body2_r_hot_3 .top-item .top_title{color: black} #body2_r_hot_3 .top-item .top_title:hover{color: #2459a2} /*分享弹窗样式*/ #all_area_pub{width: 100%;height: 100%;background-color: rgba(150,150,150,0.6);position: fixed;top: 0;left: 0;display: none} #fenxiang_tc{width: 581px;height: 337px;background-color: white;margin: 0 auto 0;margin-top: 130px;border-radius:5px;} #tc_title{width: 581px;height: 28px;background-color: #e6ecf3;border-top-left-radius:5px;border-top-right-radius:5px;position: relative} #tc_title_1{display: inline-block;color: #8aa3c4;position: absolute;font-size: 15px;font-weight: 500;left: 12px;top: 3px} #tc_title_2{display: inline-block;position: absolute;right: 12px;color: #8aa3c4;font-weight: 700;} #tc_title_2:hover{cursor: pointer} #tc_neirong{width: 541px;height: 275px;margin: 0 auto 0;margin-top: 15px} #tc_yeqian{width: 541px;height: 37px;border-bottom: 1px solid #e6ecf3;} #tc_text_area{width: 541px;height: 98px;margin-top: 16px;border-top-left-radius:5px;border-top-right-radius:5px;background-color: #e6ecf3} #tc_count{width: 541px;height: 30px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color: #e6ecf3;} #tc_leixing{width: 541px;height: 30px;margin-top: 10px;} #tc_publish{width: 541px;height: 30px;margin-top: 15px;} #tc_yeqian a{display: inline-block;width: 93px;height: 35px;text-align: center;line-height: 35px;background-color: #e6ecf3;border-top-left-radius:5px;border-top-right-radius:5px;font-size: 15px;color: #2459a2;font-weight: 700;border: 1px solid #ccdcef} #tc_yeqian .active{background-color: white;border-bottom: none} #tc_yeqian a,#tc_leixing a,#tc_publish a:hover{cursor: pointer} #tc_text_area textarea{width: 529px;height: 76px;margin-top: 5px;margin-left: 5px;border: 1px solid #ccdcef} #tc_count div{margin-left: 420px;color: #8aa3c4;font-size: 15px} #tc_leixing span{color: #999;font-size: 12px} #tc_leixing a{display: inline-block;width: 60px;height: 30px;font-size: 12px;font-weight: 700;text-align: center;line-height: 30px;color: white;background-color: #e6ecf3;border-radius: 5px;margin-left: 5px} #tc_leixing .active{background-color: #2459a2} #tc_publish .clear{margin-left: 395px;font-size: 12px;color: #2459a2} #tc_publish .publish{display: inline-block;width: 96px;height: 30px;border-radius: 5px;text-align: center;line-height: 30px;background-color: #e6ecf3;color: white;font-size: 15px;margin-left: 20px;font-weight: 700} #tc_publish .active{background-color: #84a42b} /*登陆注册弹窗样式*/ #all_area_login{width: 100%;height: 100%;background-color: rgba(150,150,150,0.6);position: fixed;top: 0;left: 0;display: none} #login_tc{width: 700px;height: 375px;background-color: white;margin: 0 auto 0;margin-top: 100px;border-radius:5px;} #login_tc_top{width: 700px;height: 28px;background-color: #e6ecf3;border-top-left-radius: 5px;border-top-right-radius: 5px;position: relative} #login_tc_top span{color: #8aa3c4;position: absolute;font-size: 15px;font-weight: 500;} #login_tc_top .title_login{left: 12px;top: 3px} #login_tc_top .title_regedit{left: 362px;top: 3px} #login_tc_top .title_close{right: 12px;top: 3px} #login_tc_top .title_close:hover{cursor: pointer} #login_tc_left{width: 348px;height: 335px;display: inline-block;border-right: 1px dotted;position: relative} #login_tc_right{width: 346px;height: 335px;display: inline-block;position: relative} #login_input{width: 222px;height: 250px;position: absolute;top: 22px;left: 60px} #regedit_input{width: 222px;height: 270px;position: absolute;top: 22px;left: 55px} #login_type{width: 100%;height: 20px;text-align: center;line-height: 30px} #num_area_select select{width: 100%;height: 28px;border: 1px solid #ccdcef;margin-top: 17px} #num_area_select input{width: 220px;height: 28px;border: 1px solid #ccdcef;margin-top: 17px} #auto_login span{font-size: 12px} #auto_login{margin-top: 17px} #auto_login a{color: #2459a2;margin-left: 50px} #login_button span{display: inline-block; width: 95px;height: 31px;background-color: #2459a2;text-align: center;line-height: 31px;margin-top: 17px;color: white;border-radius: 5px} .phone_num{font-size: 15px;color: #2459a2} .user_id{font-size: 15px;color: #abb6d2} #regedit_tc_top{width: 100%;height: 20px;text-align: center;line-height: 30px} #num_area_select2 select{width: 100%;height: 28px;border: 1px solid #ccdcef;margin-top: 17px} #num_area_select2 input{width: 140px;height: 28px;border: 1px solid #ccdcef;margin-top: 17px;display: inline-block} #get_MsgCode{font-size: 12px;width: 70px;height: 28px;background-color: #2459a2;color: white;text-align: center;line-height: 28px;border-radius: 5px;display: inline-block;margin-left: 5px} #not_get_msg{font-size: 12px;margin-left: 65px} #not_get_msg a{color: #2459a2} #checkcode_pwd input{width: 220px;height: 28px;border: 1px solid #ccdcef;margin-top: 17px} #next_step_button span{display: inline-block; width: 95px;height: 31px;background-color: #2459a2;text-align: center;line-height: 31px;margin-top: 17px;color: white;border-radius: 5px} #login_button span,#next_step_button span,#get_MsgCode:hover{cursor: pointer} /*评论模块样式*/ #body2_l_area .pinglun_model{width: 628px;height: 100%;background-color: #f6f6f6;margin-bottom: 10px;border: 1px solid #cbdcee;border-radius: 5px;display: none} .pinglun_top{height: 38px;width: 100%;border-bottom: 1px dotted grey;position: relative} .pinglun_top .pinglun_title,.pinglun_top .pinglun_close{font-size: 12px;color: #b4b4b4;font-weight: 700;position: absolute} .pinglun_top .goto_page{font-size: 11px;color: #99aecb;position: absolute} .pinglun_top .pinglun_title{top: 10px;left: 15px} .pinglun_top .goto_page{top: 10px;left: 105px} .pinglun_top .pinglun_close{top: 5px;right: 15px} .pinglun_area{width: 100%;height: 95px; position: relative;} .pinglun_area textarea{width:516px;height: 46px;border: 1px solid rgb(204, 220, 239);display: inline-block;position: absolute;left: 15px;top: 10px} .pinglun_btn1{width: 62px;height: 31px;color: white;font-size: 14px;font-weight: 700;background-color: #e6ecf3;border-radius: 5px;display: inline-block;text-align: center;line-height: 31px;position: absolute;right: 15px;top: 10px} .pinglun_area a{font-size: 11px;color: #99aecb;position: absolute;right: 25px;bottom: 20px} .pinglun_li{display: inline-block;width: 100%;height: 29px;border-bottom: 1px dotted grey;margin-top: 8px} .pinglun_li a{font-size: 12px;color: #2459a2;margin-left: 15px} .pinglun_li .li1{font-size: 12px;margin-left: 15px} .pinglun_li .li2{font-size: 12px;color: #b4b4b4;margin-left: 15px} .pinglun_li .li3{font-size: 12px;color: #b4b4b4;margin-left: 15px} .pinglun_top .pinglun_close,.pinglun_btn1:hover{cursor: pointer} .pinglun_area a:hover{cursor: pointer} .pinglun_area .active{background-color: #2459a2} </style> </head> <body> <div id="head1"> <div id="head1_in"> <a id="head1_in_a" href="#"><img src="https://dig.chouti.com/images/logo.png"></a> <div id="head1_in_1"> <a class="a1" href="#">全部</a> <a class="a1" href="#">42区</a> <a class="a1" href="#">段子</a> <a class="a1" href="#">图片</a> <a class="a2" href="#">挨踢1024</a> <a class="a2" href="#">你问我答</a> </div> <div id="head1_in_2"> <a class="a3" href="#">注册</a> <a class="a3" href="#">登陆</a> </div> <div id="head1_in_3"> <input type="text" class="a4"> <input type="button" class="a5" value="搜"> </div> <div id="head1_in_2_2"> <a href="#">无名氏</a> </div> </div> </div> <div id="body1"> <div id="body2"> <div id="body2_l"> <div id="body2_l_top"> <div class="b1"> <div>最热</div> <div>发现</div> <div>人类发布</div> </div> <div class="b2"> <a href="#" class="b2_a1">即时排序</a> <a href="#" class="b2_a2">24小时</a> <a href="#" class="b2_a2">3天</a> </div> <div class="b3"> <span class="add">+</span> <span>发布</span> </div> </div> <div id="body2_l_area"> <div class="item"> <div> <div class="item_1"> <a class="item_title">阿里云大面积瘫痪，据多地网友反应，阿里云服务器出现大面积故障...</a> <a class="item_url">-www.maoqiuapp.com</a> <a class="item_addr" href="#">42区</a> </div> <div class="item_2"> <a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a> <a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a> <a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">麦的垛朱尼尔</a> <a class="time_count"><span class="time_count_1">1小时6分钟前</span><span>入热榜</span></a> <a class="fenxiang"><img src="chouti_img/3.png"></a> </div> </div> <div class="little_img"><a><img src="chouti_img/1.png"></a></div> <div class="pinglun_model"> <div class="pinglun_top"> <span class="pinglun_title">最热评论(<a>2</a>)</span> <span class="goto_page">去评论页面</span> <span class="pinglun_close">x</span> </div> <ul class="pinglun_ul"> <li class="pinglun_li"> <a>无名氏1</a> <span class="li1">评论内容aaaaaa</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> <li class="pinglun_li"> <a>无名氏2</a> <span class="li1">评论内容aaaaaabbbbbbbbbbbbbbbbbbbb</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> </ul> <div class="pinglun_area"> <textarea></textarea> <div class="pinglun_btn1">评论</div> <a>收起</a> </div> </div> </div> <div class="item"> <div> <div class="item_1"> <a class="item_title">阿里云大面积瘫痪，据多地网友反应，阿里云服务器出现大面积故障，导致很多服务无法使用！原因不详！</a> <a class="item_url">-www.maoqiuapp.com</a> <a class="item_addr" href="#">42区</a> </div> <div class="item_2"> <a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a> <a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a> <a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">麦的垛朱尼尔</a> <a class="time_count"><span class="time_count_1">1小时6分钟前</span><span>入热榜</span></a> <a class="fenxiang"><img src="chouti_img/3.png"></a> </div> </div> <div class="little_img"><a><img src="chouti_img/1.png"></a></div> <div class="pinglun_model"> <div class="pinglun_top"> <span class="pinglun_title">最热评论(<a>2</a>)</span> <span class="goto_page">去评论页面</span> <span class="pinglun_close">x</span> </div> <ul class="pinglun_ul"> <li class="pinglun_li"> <a>无名氏1</a> <span class="li1">评论内容aaaaaa</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> <li class="pinglun_li"> <a>无名氏2</a> <span class="li1">评论内容aaaaaabbbbbbbbbbbbbbbbbbbb</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> </ul> <div class="pinglun_area"> <textarea></textarea> <div class="pinglun_btn1">评论</div> <a>收起</a> </div> </div> </div> <div class="item"> <div> <div class="item_1"> <a class="item_title">阿里云大面积瘫痪，据多地网友反应，阿里云...</a> <a class="item_url">-www.maoqiuapp.com</a> <a class="item_addr" href="#">42区</a> </div> <div class="item_2"> <a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a> <a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a> <a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">麦的垛朱尼尔</a> <a class="time_count"><span class="time_count_1">1小时6分钟前</span><span>入热榜</span></a> <a class="fenxiang"><img src="chouti_img/3.png"></a> </div> </div> <div class="little_img"><a><img src="chouti_img/1.png"></a></div> <div class="pinglun_model"> <div class="pinglun_top"> <span class="pinglun_title">最热评论(<a>2</a>)</span> <span class="goto_page">去评论页面</span> <span class="pinglun_close">x</span> </div> <ul class="pinglun_ul"> <li class="pinglun_li"> <a>无名氏1</a> <span class="li1">评论内容aaaaaa</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> <li class="pinglun_li"> <a>无名氏2</a> <span class="li1">评论内容aaaaaabbbbbbbbbbbbbbbbbbbb</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> </ul> <div class="pinglun_area"> <textarea></textarea> <div class="pinglun_btn1">评论</div> <a>收起</a> </div> </div> </div> <div class="item"> <div> <div class="item_1"> <a class="item_title">阿里云大面积瘫痪，据多地网友反应，阿里云服务器出现大面积故障，导致很多服务无法使用！原因不详！很多服务无法使用！原因不详！很多服务无法使用！原因不详！很多服务无法使用！原因不详！</a> <a class="item_url">-www.maoqiuapp.com</a> <a class="item_addr" href="#">42区</a> </div> <div class="item_2"> <a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a> <a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a> <a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">麦的垛朱尼尔</a> <a class="time_count"><span class="time_count_1">1小时6分钟前</span><span>入热榜</span></a> <a class="fenxiang"><img src="chouti_img/3.png"></a> </div> </div> <div class="little_img"><a><img src="chouti_img/1.png"></a></div> <div class="pinglun_model"> <div class="pinglun_top"> <span class="pinglun_title">最热评论(<a>2</a>)</span> <span class="goto_page">去评论页面</span> <span class="pinglun_close">x</span> </div> <ul class="pinglun_ul"> <li class="pinglun_li"> <a>无名氏1</a> <span class="li1">评论内容aaaaaa</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> <li class="pinglun_li"> <a>无名氏2</a> <span class="li1">评论内容aaaaaabbbbbbbbbbbbbbbbbbbb</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> </ul> <div class="pinglun_area"> <textarea></textarea> <div class="pinglun_btn1">评论</div> <a>收起</a> </div> </div> </div> <div class="item"> <div> <div class="item_1"> <a class="item_title">阿里云大面积瘫痪，据多地网友反应，阿里云服务器出现大面积故障，导致很多服务无法使用！原因不详！</a> <a class="item_url">-www.maoqiuapp.com</a> <a class="item_addr" href="#">42区</a> </div> <div class="item_2"> <a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a> <a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a> <a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">麦的垛朱尼尔</a> <a class="time_count"><span class="time_count_1">1小时6分钟前</span><span>入热榜</span></a> <a class="fenxiang"><img src="chouti_img/3.png"></a> </div> </div> <div class="little_img"><a><img src="chouti_img/1.png"></a></div> <div class="pinglun_model"> <div class="pinglun_top"> <span class="pinglun_title">最热评论(<a>2</a>)</span> <span class="goto_page">去评论页面</span> <span class="pinglun_close">x</span> </div> <ul class="pinglun_ul"> <li class="pinglun_li"> <a>无名氏1</a> <span class="li1">评论内容aaaaaa</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> <li class="pinglun_li"> <a>无名氏2</a> <span class="li1">评论内容aaaaaabbbbbbbbbbbbbbbbbbbb</span> <span class="li2">5分钟前发布</span> <span class="li3">来自iPhone</span> </li> </ul> <div class="pinglun_area"> <textarea></textarea> <div class="pinglun_btn1">评论</div> <a>收起</a> </div> </div> </div> </div> </div> <div id="body2_r"> <div id="body2_r_top"> <a href="#"><img src="https://dig.chouti.com/images/report.png"></a> <a href="#" class="a2"><img src="https://dig.chouti.com/images/report_children.png"></a> </div> <div id="body2_r_search"> <a href="#">如何避免自己被封号</a> </div> <div id="body2_r_img"> <a><img src="https://dig.chouti.com/images/homepage_download.png"></a> </div> <div id="body2_r_hot"> <div id="body2_r_hot_1"> <span>24小时全部</span> <span class="top10">TOP 10</span> </div> <div id="body2_r_hot_2">最热榜</div> <div id="body2_r_hot_3"> <div class="top-item"> <a class="top_count" href="#">310</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> <div class="top-item"> <a class="top_count" href="#">298</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> <div class="top-item"> <a class="top_count" href="#">210</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> <div class="top-item"> <a class="top_count" href="#">150</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> <div class="top-item"> <a class="top_count" href="#">106</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> <div class="top-item"> <a class="top_count" href="#">66</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> <div class="top-item"> <a class="top_count" href="#">36</a> <a class="top_title" href="#">评分 9.8，这部只拍烧烤的纪录片，没吃宵夜的你千万别点开</a> </div> </div> </div> </div> </div> </div> <div id="all_area_pub"> <div id="fenxiang_tc"> <div id="tc_title"> <span id="tc_title_1">分享新发现</span> <span id="tc_title_2">x</span> </div> <div id="tc_neirong"> <div id="tc_yeqian"> <a>链接</a> <a class="active">文字</a> <a>图片</a> </div> <div id="tc_text_area"> <textarea></textarea> </div> <div id="tc_count"> <div>还可以输入<span id="word_count">150</span>字</div> </div> <div id="tc_leixing"> <span>发布到:</span> <a class="duanzi active">段子</a> <a class="wenda">你问我答</a> </div> <div id="tc_publish"> <a class="clear">清空</a> <a class="publish active">发布</a> </div> </div> </div> </div> <div id="all_area_login"> <div id="login_tc"> <div id="login_tc_top"> <span class="title_login">登陆</span> <span class="title_regedit">注册</span> <span class="title_close">x</span> </div> <div id="login_tc_body"> <div id="login_tc_left"> <div id="login_input"> <div id="login_type"> <span class="phone_num">手机号登陆</span> <span class="user_id">|</span> <span class="user_id">用户名登陆</span> </div> <div id="num_area_select"> <select> <option>中国(+86)</option> <option>中国香港(+852)</option> <option>中国澳门(+853)</option> <option>中国台湾(+886)</option> <input type="text" placeholder="手机号" class="username_num"> <input type="password" placeholder="密码"> </select> </div> <div id="auto_login"> <span><input type="checkbox" checked="">一个月内自动登录</span> <span><a href="#">忘记密码?</a></span> </div> <div id="login_button"> <span>登录</span> </div> </div> </div> <div id="login_tc_right"> <div id="regedit_input"> <div id="regedit_tc_top"> <span class="phone_num">1 填写手机号</span> <span class="user_id"> > </span> <span class="user_id">2 填写基本资料</span> </div> <div id="num_area_select2"> <select> <option>中国(+86)</option> <option>中国香港(+852)</option> <option>中国澳门(+853)</option> <option>中国台湾(+886)</option> </select> <div> <input type="text" placeholder="手机号"> <div id="get_MsgCode">获取验证码</div> <span id="not_get_msg">收不到短信？<a href="#">获取语音验证码</a></span> </div> </div> <div id="checkcode_pwd"> <input type="text" placeholder="验证码"> <input type="password" placeholder="密码"> </div> <div id="next_step_button"> <span>下一步</span> </div> </div> </div> </div> </div> </div> </body> <script src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> //点击注册或者登陆按钮，显示注册/登陆弹窗 $('#head1_in_2 .a3').click(function(){ $('#all_area_login').css({'display':'block'}); }); //点击弹窗的x，隐藏注册/登陆弹窗 $('#login_tc_top .title_close').click(function(){ $('#all_area_login').css({'display':'none'}); }); //点击登陆按钮，关闭当前弹窗，右上角隐藏登陆/注册按钮，并显示登陆用户名 $('#login_button>span').click(function(){ $('#all_area_login').css({'display':'none'}); var username = $('#num_area_select .username_num').val(); $('#head1_in_2').css({'display':'none'}); $('#head1_in_2_2').css({'display':'inline-block'}); $('#head1_in_2_2 a').text(username) }); //点击发布按钮，显示文字输入的弹窗 $('#body2_l_top .b3').click(function(){ $('#all_area_pub').css({'display':'block'}); }); //点击发布弹窗的x，隐藏弹窗 $('#tc_title_2').click(function(){ $('#all_area_pub').css({'display':'none'}) }); //点击发布弹窗的发布按钮，隐藏当前弹窗，#body2_l_area下面增加div块 $('#tc_publish .publish').click(function(){ if($('#tc_text_area textarea').val()){ var input_text = $('#tc_text_area textarea').val(); }else{ var input_text = '这个家伙很懒，什么内容也没写。'; } $('#tc_text_area textarea').val(''); $('#all_area_pub').css({'display':'none'}); var user_name = $('#head1_in_2_2 a').text(); $('#body2_l_area').prepend('<div class="item"><div><div class="item_1"><a class="item_title">'+input_text+'</a><a class="item_url">-www.maoqiuapp.com</a><a class="item_addr" href="#">42区</a></div><div class="item_2"><a class="dianzan"><img src="chouti_img/4.png"><b>0</b></a><a class="pinglun"><img src="chouti_img/5.png"><b>0</b></a><a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">'+user_name+'</a><a class="time_count"><span class="time_count_1">1分钟前</span><span>入热榜</span></a><a class="fenxiang"><img src="chouti_img/3.png"></a></div> </div><div class="little_img"><a><img src="chouti_img/1.png"></a></div><div class="pinglun_model"><div class="pinglun_top"><span class="pinglun_title">最热评论(<a>2</a>)</span><span class="goto_page">去评论页面</span><span class="pinglun_close">x</span></div><ul class="pinglun_ul"></ul><div class="pinglun_area"><textarea></textarea><div class="pinglun_btn1">评论</div><a>收起</a></div></div></div>') }); //清空按钮事件 $('#tc_publish .clear').click(function(){ $('#tc_text_area textarea').val('') }); //点赞功能，新增评论为后加入的元素，需要事件代理 $('#body2_l_area').on('click','.dianzan' , function(){ $(this).children('b').text(Number($(this).children('b').text())+1) }); //输入框字数提醒，实时监测文本框输入数字，并且根据内容更改发布按钮的样式 $('#tc_text_area textarea').bind('input propertychange change',function(){ $('#word_count').text(150-$('#tc_text_area textarea').val().length); if($('#tc_text_area textarea').val().length >=1){ $('#tc_publish .publish').addClass('active') }else{ $('#tc_publish .publish').removeClass('active') } }); //点击展开评论功能函数 $('#body2_l_area').on('click', '.pinglun', function(){ $(this).parent().parent().parent().children('.pinglun_model').css({'display':'block'}); }); //点击评论模块的x按钮，隐藏评论模块 $('#body2_l_area').on('click', '.pinglun_close', function(){ $(this).parent().parent().css({'display':'none'}); }); //点击评论模块的收起按钮，隐藏评论模块 $('#body2_l_area').on('click', '.pinglun_area a', function(){ $(this).parent().parent().css({'display':'none'}); }); //页面评论框输入内容使按钮高亮 $('#body2_l_area').on('input propertychange change', '.pinglun_area textarea', function(){ if($(this).val().length >=1){ $(this).siblings('.pinglun_btn1').addClass('active') }else{ $(this).siblings('.pinglun_btn1').removeClass('active') } }); //点击评论按钮，ul下面新增li，评论数量更新 $('#body2_l_area').on('click', '.pinglun_btn1', function(){ var user_name = $('#head1_in_2_2 a').text(); if($(this).siblings('textarea').val()){ var input_text = $(this).siblings("textarea").val(); }else{ var input_text = '无语。'; } $(this).siblings('textarea').val(''); $(this).parent().parent().children('ul').prepend('<li class="pinglun_li"><a>'+user_name+'</a><span class="li1">'+input_text+'</span><span class="li2">1分钟前发布</span><span class="li3">来自iPhone</span></li>') var count_li= $(this).parent().parent().children('ul').children('li').length; console.log(count_li); $(this).parent().parent().children('.pinglun_top').children('.pinglun_title').children('a').text(count_li); $(this).parent().parent().parent().children('div').children('.item_2').children('.pinglun').children('b').text(count_li) }); </script> </html>
前端开发之抽屉热搜榜
最新推荐文章于 2025-03-22 20:06:49 发布
扫一扫
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
