代码如下:
CSS
#menu,#content{float: left;}
#menu .selected{color:#ff6600;}
#content{margin-left: 40px;}
#content .box{display: none;}
JS
$(function(){
// 绑定点击左侧菜单链接事件
$("#menu a").click(function(){
// 设置当前点击的链接的选中样式
$(this).addClass("selected").siblings().removeClass("selected");
// $(this).index()是当前被点击链接的索引值, 找到右侧div对应的索引值显示
// 同时隐藏右侧其他的div. 此处除了用index做以外
// 也可以给左侧a标签设置ID,通过id对应右侧的div.
$('#content .box:eq(' + $(this).index() + ')').show().siblings().hide();
});
});
HTML
点击左侧第一个
点击左侧第二个
点击左侧第三个
用jq做,就是显示不显示的问题,用show和hide就可以控制
可以用js做