我用DIV做的盒子,怎么才能在左边点击连接然后本页面右边显示内容,不用框架。我用的C#,求详细例
展开全部
依你要的效果,做了一个简单的例子,希望对你有所帮助,本例效果:点击左侧 divleft 里的链接 a ,右边 divright 显示不同的内容,代码如下:
Xhtml Code:
<div id="divleft">
<a href="#">链接一</a> 左侧的链接
<a href="#">链接二</a>
</div>
<div id="divright">
<div>内容一</div> 右侧出现的内容
<div>内容二</div>
</div>
jQuery Code:
$('#divright div').hide();
$('#divleft a').each(function(i){
$(this).click((function(k){
return function(){
var int = k;
$('#divright div').hide();
$('#divright').find('div').eq(int).show();
}
})(i));
});
Css Code:
#divleft{ background:#ddd; float:left; height:100px; padding:10px; width:80px;}
#divleft a{ color:#000; display:block;}
#divright{ background:#eee; float:left; height:100px; padding:10px; width:300px;}
附效果图一张:
希望对你能有所帮助。
Xhtml Code:
<div id="divleft">
<a href="#">链接一</a> 左侧的链接
<a href="#">链接二</a>
</div>
<div id="divright">
<div>内容一</div> 右侧出现的内容
<div>内容二</div>
</div>
jQuery Code:
$('#divright div').hide();
$('#divleft a').each(function(i){
$(this).click((function(k){
return function(){
var int = k;
$('#divright div').hide();
$('#divright').find('div').eq(int).show();
}
})(i));
});
Css Code:
#divleft{ background:#ddd; float:left; height:100px; padding:10px; width:80px;}
#divleft a{ color:#000; display:block;}
#divright{ background:#eee; float:left; height:100px; padding:10px; width:300px;}
附效果图一张:
希望对你能有所帮助。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询