<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
*{margin:0; padding:0;}
li{list-style:none; float: left; width:100px; height:50px; background:#fff700; text-align: center; line-height: 50px; border-right:1px solid;}
#box{width:403px; height:400px; border:1px solid darkred; text-align: center; line-height:300px; }
.start{background: red;}
</style>
</head>
<body>
<ul>
<li class="start">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
<div id="box">菜单一的内容</div>
<script>
var arr=["菜单一的内容","菜单二的内容","菜单三的内容","菜单四的内容"];
$(function () {
for(var i=0;i<arr.length;i++){
$("li:eq("+i+")").click(function () {
$("li").removeClass("start");
$(this).addClass("start");
$("div").html(arr[$(this).index()]);
});
}
});
</script>
</body>
</html>
