<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.menu .menu-item{
float:left;
border-right: 1px solid;
}
.active{
background-color: green;
cursor: pointer;
}
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;">
<div class='menu'>
<div class="menu-item active" mid='m1'>菜单一</div>
<div class="menu-item" mid='m2'>菜单二</div>
<div class="menu-item" mid='m3'>菜单三</div>
</div>
<div class="content">
<div class="" cid='m1'>内容1</div>
<div class="hide" cid='m2'>内容2</div>
<div class="hide" cid='m3'>内容3</div>
</div>
</div>
<script src="jquery-2.1.4.min.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children('[cid="'+$(this).attr('mid')+'"]').removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
