<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <style> *{ margin: 0; } .cc{ margin: 0 auto; width: 75%; } .menus{ height: 50px; width: 1000px; background-color: royalblue; border: 1px solid blue; } .contents{ height: 300px; width: 1000px; background-color: purple; border: solid goldenrod 1px; } .uu{ line-height: 50px; } .uu li{ display: inline-block; } .uu li{ margin: -2.2px; padding-left: 6px; padding-right: 6px; } .getcolor{ background-color: olivedrab; border-top: solid 2px red; } .hide{ display: none; } </style> </head> <body> <div class="cc"> <div class="menus"> <ul class="uu"> <li class="getcolor" aa = "d1" onclick="f1(this)">菜单一</li> <li aa = "d2" onclick="f1(this)">菜单二</li> <li aa = "d3" onclick="f1(this)">菜单三</li> </ul> </div> <div class="contents"> <div id="d1">内容一</div> <div id="d2" class="hide">内容二</div> <div id="d3" class="hide">内容三</div> </div> </div> </body> <script> function f1(self) { $(self).addClass("getcolor").siblings().removeClass("getcolor"); //获取属性值 var getele = $(self).attr("aa"); // console.log(getele); //改变内容 $("#"+getele).removeClass("hide").siblings().addClass("hide"); } </script> </html>