前端jquery基础实例
一、左边的菜单栏
<!DOCTYPE html> <html lang=http://www.mamicode.com/"en"> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title>left_menu</title> <style> body{ margin: 0; } .hide{ display: none; } .top{ height: 48px; background-color: darkturquoise; } .outer{ float: left; width: 20%; height: 600px; background-color: darkgray; } .outer .menu .title{ border: 1px solid darkcyan; background-color: darkcyan; } .content{ float: left; width: 80%; background-color: bisque; height: 600px; } </style> <script src=http://www.mamicode.com/"js/jquery-3.4.1.js"></script> </head> <body> <div class=http://www.mamicode.com/"top"></div> <div class=http://www.mamicode.com/"outer"> <div class=http://www.mamicode.com/"menu"> <div class=http://www.mamicode.com/"title" onclick=http://www.mamicode.com/"Show(this);">菜单一</div> <ul class=http://www.mamicode.com/"con"> <li>菜单一中的功能一</li> <li>菜单一中的功能二</li> <li>菜单一中的功能三</li> </ul> </div> <div class=http://www.mamicode.com/"menu"> <div class=http://www.mamicode.com/"title" onclick=http://www.mamicode.com/"Show(this);">菜单二</div> <ul class=http://www.mamicode.com/"con hide"> <li>菜单二中的功能一</li> <li>菜单二中的功能二</li> <li>菜单二中的功能三</li> </ul> </div> <div class=http://www.mamicode.com/"menu"> <div class=http://www.mamicode.com/"title" onclick=http://www.mamicode.com/"Show(this);">菜单三</div> <ul class=http://www.mamicode.com/"con hide"> <li>菜单三中的功能一</li> <li>菜单三中的功能二</li> <li>菜单三中的功能三</li> </ul> </div> </div> <div class=http://www.mamicode.com/"content"></div> <script> function Show(self) { $(self).next().removeClass("hide"); $(self).parent().siblings().find(".con").addClass("hide"); } </script> </body> </html>
结果图示
二、tab栏切换实例
<!DOCTYPE html> <html lang=http://www.mamicode.com/"en"> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title>jquer_tab</title> <script src=http://www.mamicode.com/"js/jquery-3.4.1.js"></script> <style> *{ margin: 0; padding: 0; } .current{ background-color: cornflowerblue; color: white; } .tab{ height: 40px; background-color: darkgray; } li{ display: inline; list-style: none; padding: 20px; } .outer{ width: 70%; margin: 0 auto; height: 300px; background-color: bisque; } .content{ height: auto; padding: 50px; background-color: darkcyan; } .hide{ display: none; } </style> </head> <body> <div class=http://www.mamicode.com/"outer"> <ul class=http://www.mamicode.com/"tab"> <li sel=http://www.mamicode.com/"c1" class=http://www.mamicode.com/"current" onclick=http://www.mamicode.com/"Tab(this);">菜单一</li> <li sel=http://www.mamicode.com/"c2" onclick=http://www.mamicode.com/"Tab(this);">菜单二</li> <li sel=http://www.mamicode.com/"c3" onclick=http://www.mamicode.com/"Tab(this);">菜单三</li> </ul> <div class=http://www.mamicode.com/"content"> <div id=http://www.mamicode.com/"c1">我是菜单一的内容</div> <div id=http://www.mamicode.com/"c2" class=http://www.mamicode.com/"hide">我是菜单二的内容</div> <div id=http://www.mamicode.com/"c3" class=http://www.mamicode.com/"hide">我是菜单三的内容</div> </div> </div> <script> function Tab(self) { $(self).addClass("current").siblings().removeClass("current"); var index = $(self).attr("sel"); $("#"+index).removeClass("hide").siblings().addClass("hide"); } </script> </body> </html>
结果图示
三、隐藏/显示、渐变控制
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/42287.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")