<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 880px;height: 480px;border: 1px solid #ddd;margin: 100px auto;}
#box .list{width: 180px;border-right:1px solid #ddd ;height: 480px;float: left;}
#box .list li{height: 45px;border-bottom:1px solid #ddd ;list-style: none;line-height: 45px;font-size: 16px;text-align: center;}
#box .con{width: 698px;height: 400px;background: #ccc;float: left;overflow: hidden;}
#box .on{background: #ccc;}
#box .con div{
width: 695px;height: 480px;font-size: 14px;text-align: center;
}
#box .con div:nth-child(1){
background: palegreen;
}
#box .con div:nth-child(2){
background:orange;
}
#box .con div:nth-child(3){
background:palevioletred;
}
#box .con div:nth-child(4){
background:blueviolet;
}
#box .con div:nth-child(5){
background:brown ;
}
</style>
</head>
<body>
<div );
$conDiv.eq($index).show().siblings().hide();
});
})
</script>
</body>
</html>
相关文章：