左侧菜单实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>menu</title> <style> .menu{ width: 10%;float: left;height: 600px;background-color: darkkhaki } .contain{ width: 90%;float: left;height: 600px;background-color: cornflowerblue; } .title{ background-color: green; color: black; height: 50px; line-height: 50px; cursor: pointer; } .hide{ display: none; } </style> </head> <body> <div> <div class="menu"> <div class="item"> <div class="title" onclick="func(this)" >菜单一</div> <div class="body"> <div>1.1</div> <div>1.2</div> <div>1.3</div> </div> </div> <div class="item"> <div class="title" onclick="func(this)">菜单二</div> <div class="body hide"> <div>2.1</div> <div>2.2</div> <div>2.3</div> </div> </div> <div class="item"> <div class="title" onclick="func(this)">菜单三</div> <div class="body hide"> <div>3.1</div> <div>3.2</div> <div>3.3</div> </div> </div> </div> <div class="contain"></div> </div> <script src="jquery-3.2.1.js"></script> <script> function func(ths) { $(ths).next().removeClass("hide"); $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html>
玩野头部菜单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> .tab-box .tab-menu{ background-color: #0c959b1a; border: 1px solid #dddddd; cursor: pointer; height: 30px; line-height: 30px; } .tab-box .tab-body{ border: 1px solid #0c959b1a; } .tab-box .hide{ display: none; } .tab-menu a{ border-right: 1px solid white; padding: 9px; } .caver{ background-color: white; color: black; border-top: 2px solid red; } </style> </head> <body> <div class="tab-box"> <div class="tab-menu"> <a dd="c1" onclick="changtab(this) " class="caver">菜单一</a> <a dd="c2" onclick="changtab(this)">菜单二</a> <a dd="c3" onclick="changtab(this)">菜单三</a> </div> <div class="tab-body"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function changtab(ths) { $(ths).addClass('caver').siblings().removeClass('caver'); var cID = $(ths).attr('dd'); var temp = "#" + cID; $(temp).removeClass('hide').siblings().addClass('hide'); } </script> </body> </html>
全选：
$('table :checkbox').prop('checked',true);
取消：
$('table :checkbox').prop('checked',false);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> <td>在线</td> </tr> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> <td>断开</td> </tr> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> <td>断开</td> </tr> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> <td>断开</td> </tr> </tbody> </table> <input type="button" value="全选" onclick="selall()"/> <input type="button" value="取消" onclick="clearall()"/> <input type="button" value="反选" onclick="reveall()"/> <script src="jquery-3.2.1.js"></script> <script> function selall() { $('table :checkbox').prop('checked',true); } function clearall() { $('table :checkbox').prop('checked',false); } function reveall() { $('table :checkbox').each(function () { var ischeck = $(this).prop('checked'); if (ischeck){ $(this).prop('checked',false); } else { $(this).prop('checked',true); } }) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .gotop{ position: fixed; right: 0; bottom: 0; height: 50px; } .beijing{ background-color: #dddddd; height: 2000px; } .hide{ display: none; } </style> </head> <body> <div class="beijing"></div> <div class="gotop hide" ><a onclick="fuctop()">返回顶部</a></div> <script src="jquery-3.2.1.js"></script> <script> function fuctop() { $(window).scrollTop(0) } window.onscroll=function () { var cur = $(window).scrollTop(); if (cur>100){ $('.gotop').removeClass('hide'); }else { $('.gotop').addClass('hide') } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="add()" value="添加"/> <div onclick="func()"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script src="jquery-3.2.1.js"></script> <script> // $(function () { // $('li').click(function () { // var temp = $(this).text(); // alert(temp) // // }) function add() { $('ul').append('<li>7</li>') } function func() { $('ul').delegate('li','click',function () { var temp = $(this).text(); alert(temp) }) } </script> </body> </html>