好吧,我正在努力做到这一点,所以当您单击一个 div 时,它会“关闭”其他两个 div 按钮,并使某些内容不可见
jQuery:
var open1 = false;
var open2 = false;
var open3 = false;
$(document).ready(function(){
$("#gun").on('click',
function(){
open2 = !open2;
if(open2) {
$("img.dataselectgun").fadeTo(0, 1.0);
$("img.dataselectpop").fadeTo(0, 0.0);
$("img.dataselectart").fadeTo(0, 0.0);
$("#popactivated").attr("id","pop");
$("#artactivated").attr("id","art");
$(this).attr("id","gunactivated");
}
else {
$("img.dataselectpop").fadeTo(0, 1);
$("img.dataselectart").fadeTo(0, 1);
$("#gunactivated").attr("id","gun");
}
}
);
$("#pop").on('click',
function(){
open1 = !open1;
if(open1) {
$("img.dataselectgun").fadeTo(0, 0.0);
$("img.dataselectpop").fadeTo(0, 1.0);
$("img.dataselectart").fadeTo(0, 0.0);
$("#gunactivated").attr("id","gun");
$("#artactivated").attr("id","art");
$(this).attr("id","popactivated");
}
else {
$("img.dataselectgun").fadeTo(0, 1);
$("img.dataselectart").fadeTo(0, 1);
$("#popactivated").attr("id","pop");
}
}
);
$("#art").on('click',
function(){
open3 = !open3;
if(open3) {
$("img.dataselectgun").fadeTo(0, 0.0);
$("img.dataselectpop").fadeTo(0, 0.0);
$("img.dataselectart").fadeTo(0, 1.0);
$("#popactivated").attr("id","pop");
$("#gunactivated").attr("id","gun");
$(this).attr("id","artactivated");
}
else {
$("img.dataselectgun").fadeTo(0, 1);
$("img.dataselectpop").fadeTo(0, 1);
$("#popactivated").attr("id","art");
}
}
);
});
好吧哈哈这是很多jquery,所以这里是html:
<div id="header">
<div class="home" id="home" ><a href="index.html"><p><img class="rollover" src="images/home-crown.png" width="100px" /></p></a></div>
<div class="topnav" id="gun"><p>GUN</p></div>
<div class="topnav" id="pop"><p>POP</p></div>
<div class="topnav" id="art"><p>ART</p></div>
</div>
<div id="bodyparts">
<div class="pillow" ></div>
<div class="content" id="artbox"><p><img class="dataselectart" src="images/art9.png" width="300px" /></p></div>
<div class="content" id="popbox"><p><img class="dataselectpop" src="images/pop9.png" width="300px" /></p></div>
<div class="content" id="gunbox"><p><img class="dataselectgun" src="images/gun9.png" width="300px" /></p></div>
</div>
好吧,对大代码感到抱歉,但这是主要问题,每个单独的“按钮”都可以工作,但是当两个“按钮”被单击(或为真)时,它们会产生一些冲突;我尝试了切换,但收到了同样的问题,如果要通过切换来完成,那就太好了,但我是 jquery 的新手,不知道怎么做;任何帮助都会很棒
提前谢谢(我知道我的代码很乱;抱歉)
编辑:根据建议更改了一些内容;效果更好,但是有没有办法用 if/else 影响另一个 if/else(有效地用 jquery 改变 jquery?)