关于JS控制特定图片显示的问题。如果有JS函数，请一定要告诉我在哪里修改！谢！
代码如下，在线等！！！我的要求是，点击“TheF”，显示TheF.jpg；点击TheP，显示TheP.jpg。图片一次只显示一张，默认显示是TheF。对了，由于图片随浏览...
代码如下，在线等！！！
我的要求是，点击“The F”，显示The F.jpg；点击The P，显示The P.jpg。图片一次只显示一张，默认显示是The F。
对了，由于图片随浏览器缩放的关系，本人已经试过，position：absolute真的不能用，特别悲剧。
只能是JS或者其他办法了。（渐显渐隐用transition这我知道）
CSS部分
.img{
display:block;
display:none;
float:right;
align:right;
width:a%;
margin:略
}
.img:hover{
border:0px none solid;
box-shadow:0px 0px 0px 14px #FFFFFF;
}
.img-opaque{
float:right;
align:right;
width:70%;
border:0px #FFFFFF solid;
margin:略
}
.img-opaque:hover{
border:0px none solid;
box-shadow:0px 0px 0px 14px #FFFFFF;
}
div 部分（在<body></body>里）
<div id="mainbox">
<div id="left_menu">
<div style="font-size:middle;margin-left:10px;margin-top:10px;">
<li id="lme">
<a href="../E/E.html">E</a>
</li>
</div>
<div>
<li style="margin-top:13px;margin-left:10px">
<a>P</a>
</li>
<div id="lmportrait" style="font-size:small;margin-left:26px;margin-top:13px;">
<li>
<span class="selected" id="for-the_f">The F</span>
</li>
<li>
<span id="for-the_p">The P</span>
</li>
</div>
</div>
</div>
<div id="imagebox">
<img src="The_F.jpg" class="img-opaque" id="the_f">
<img src="The_P.jpg" class="img" id="the_p">
</div>
</div>
不是我悬赏低，而是我真没钱了。。。>_<在线等，着急！！！！！！来帮助的，送上美好祝福！！！ 展开
我的要求是，点击“The F”，显示The F.jpg；点击The P，显示The P.jpg。图片一次只显示一张，默认显示是The F。
对了，由于图片随浏览器缩放的关系，本人已经试过，position：absolute真的不能用，特别悲剧。
只能是JS或者其他办法了。（渐显渐隐用transition这我知道）
CSS部分
.img{
display:block;
display:none;
float:right;
align:right;
width:a%;
margin:略
}
.img:hover{
border:0px none solid;
box-shadow:0px 0px 0px 14px #FFFFFF;
}
.img-opaque{
float:right;
align:right;
width:70%;
border:0px #FFFFFF solid;
margin:略
}
.img-opaque:hover{
border:0px none solid;
box-shadow:0px 0px 0px 14px #FFFFFF;
}
div 部分（在<body></body>里）
<div id="mainbox">
<div id="left_menu">
<div style="font-size:middle;margin-left:10px;margin-top:10px;">
<li id="lme">
<a href="../E/E.html">E</a>
</li>
</div>
<div>
<li style="margin-top:13px;margin-left:10px">
<a>P</a>
</li>
<div id="lmportrait" style="font-size:small;margin-left:26px;margin-top:13px;">
<li>
<span class="selected" id="for-the_f">The F</span>
</li>
<li>
<span id="for-the_p">The P</span>
</li>
</div>
</div>
</div>
<div id="imagebox">
<img src="The_F.jpg" class="img-opaque" id="the_f">
<img src="The_P.jpg" class="img" id="the_p">
</div>
</div>
不是我悬赏低，而是我真没钱了。。。>_<在线等，着急！！！！！！来帮助的，送上美好祝福！！！ 展开
1个回答
展开全部
让两张图片position：absolute
然后让The F 显示 , The P 不显示
$('#for-the_f').click(function(){
$('#the_f').css('display','block');
$('#the_p').css('display','none');
})
$('#for-the_p').click(function(){
$('#the_p').css('display','block');
$('#the_f').css('display','none');
})
然后让The F 显示 , The P 不显示
$('#for-the_f').click(function(){
$('#the_f').css('display','block');
$('#the_p').css('display','none');
})
$('#for-the_p').click(function(){
$('#the_p').css('display','block');
$('#the_f').css('display','none');
})
更多追问追答
追问
第一，我已经说了，position：absolute不能用>_这部分写完整，我看看需要改哪儿。
总之谢了！
追答
position：absolute 不能用??主要是让两张图片重叠而已,这样一张隐藏,一张显示都在同一个地方
如果多张图片, 可以直接用each 来读啊, 然后用索引来获取点击那个出现那张图啊
啊, 一看就是JS, 肯定放在里面啦, 我认为这些应该可以省略的啊
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
