按钮更改图像

-2

我有3个按钮和3个图像。当按下其中一个按钮时，其他两个图像会淡出为不透明度：0，但由于某种原因，JavaScript代码无所作为。一个按钮应该改变引导程序的颜色，并在当前图像淡入时淡出其他图像。谁能告诉我为什么？按钮更改图像

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 

<body> 
    <div id="allMenus"> 
     <div id="menuButtons"> 
      <div id="breakfastButton"> 
       <button class="btn btn-large btn-info" data-toggle="button" id= 
       "breakfastButtonActive" type="button">Breakfast</button> 
      </div> 

      <div id="lunchButton"> 
       <button class="btn btn-large btn-primary" data-toggle="button" 
       id="lunchMenuActive" type="button">Lunch</button> 
      </div> 

      <div id="specialsButton"> 
       <button class="btn btn-large btn-primary" data-toggle="button" 
       id="specialsMenuActive" type="button">Weekly Specials</button> 
      </div> 
     </div> 
    </div> 

    <div id="menuBreakfast"><img alt="" src= 
    "SleepingMoonImages/menuBreakfast.png" width="342"></div> 

    <div id="menuLunch"><img alt="" height="840" src= 
    "SleepingMoonImages/menuLunch.png" width="342"></div> 

    <div id="menuSpecials"> 
     <img alt="" src="SleepingMoonImages/menuSpecials.png" width="342"> 

     <div id="weeklySpecialsLabel"> 
      Weekly Specials 
     </div> 

     <div id="redUnderline"></div> 

     <div id="weeklySpecialsDays"> 
      <div id="mondayLabel"> 
       Monday 
      </div> 

      <div id="tuesdayLabel"> 
       Tuesday 
      </div> 

      <div id="wednesdayLabel"> 
       Wednesday 
      </div> 

      <div id="thursdayLabel"> 
       Thursday 
      </div> 

      <div id="fridayLabel"> 
       Friday 
      </div> 

      <div id="saturdayLabel"> 
       Saturday 
      </div> 
     </div> 
    </div> 
</body> 
</html>

JavaScript文件

$(document).ready(function() { 



$("#breakfastButton").click(function (e) { 
    $('#menuLunch').fadeTo(200, 0); 
    $('#menuBreakfast').fadeTo(200, 2); 
    $('#menuSpecials').fadeTo(200, 0); 

    $("#breakfastButtonActive").removeClass('btn btn-large btn-primary').addClass('btn btn-large btn-info'); 
    $("#lunchMenuActive").removeClass('btn btn-large btn-info').addClass('btn btn-large btn-primary'); 
    $("#specialsMenuActive").removeClass('btn btn-large btn-info').addClass('btn btn-large btn-primary'); 
}); 

$("#lunchButton").click(function (e) { 
    $('#menuBreakfast').fadeTo(200, 0); 
    $('#menuLunch').fadeTo(200, 2); 
    $('#menuSpecials').fadeTo(200, 0); 
    $("#lunchMenuActive").removeClass(' btn-primary').addClass('btn-info'); 
    $("#breakfastButtonActive").removeClass('btn-info').addClass('btn-primary'); 
    $("#specialsMenuActive").removeClass('btn-info').addClass('btn-primary'); 
}); 

$("#specialsButton").click(function (e) { 
    $('#menuBreakfast').fadeTo(200, 0); 
    $('#menuLunch').fadeTo(200, 0); 
    $('#menuSpecials').fadeTo(200, 2); 
    $("#lunchMenuActive").removeClass('btn-info').addClass('btn-primary'); 
    $("#breakfastButtonActive").removeClass('btn-info').addClass('btn-primary'); 
    $("#specialsMenuActive").removeClass('btn-primary').addClass('btn-info'); 

});

}）;

来源

2015-01-21 user6680

一两件事：你为什么添加和删除在同一类同一行代码？只需删除或添加你想要的。 – Octopus 2015-01-21 00:30:43

如果我不删除btn-info，然后添加btn-primary，那么按钮的颜色不会改变我想要的颜色。 – user6680 2015-01-21 00:42:11

不是问题。 – Himmators 2015-01-21 01:22:52

它不工作，因为在剧本menuBreakfast和menuLunch的ID在您使用breakfastMenu和lunchMenu不匹配你的HTML的标识。调整Bootply与一些清理添加和删除只有不同的类，而不是添加和删除也应该保持不变的类和第二个Bootply与设置#menuLunch和#menuSpecials到display:none的第Bootply如最初#menuBreakfast是活动的（所以只显示早餐虚拟图像）。

正如评论所说，引导下跌了几分钟，所以除了作为堆栈段：

$(document).ready(function() { 
 
$("#breakfastButton").click(function (e) { 
 
     $('#menuLunch').fadeTo(200, 0); 
 
     $('#menuBreakfast').fadeTo(200, 2); 
 
     $('#menuSpecials').fadeTo(200, 0); 
 

 
     $("#breakfastButtonActive").removeClass('btn btn-large btn-primary').addClass('btn btn-large btn-info'); 
 
     $("#lunchMenuActive").removeClass('btn btn-large btn-info').addClass('btn btn-large btn-primary'); 
 
     $("#specialsMenuActive").removeClass('btn btn-large btn-info').addClass('btn btn-large btn-primary'); 
 
    }); 
 

 
    $("#lunchButton").click(function (e) { 
 
     $('#menuBreakfast').fadeTo(200, 0); 
 
     $('#menuLunch').fadeTo(200, 2); 
 
     $('#menuSpecials').fadeTo(200, 0); 
 
     $("#lunchMenuActive").removeClass(' btn-primary').addClass('btn-info'); 
 
     $("#breakfastButtonActive").removeClass('btn-info').addClass('btn-primary'); 
 
     $("#specialsMenuActive").removeClass('btn-info').addClass('btn-primary'); 
 
    }); 
 

 
    $("#specialsButton").click(function (e) { 
 
     $('#menuBreakfast').fadeTo(200, 0); 
 
     $('#menuLunch').fadeTo(200, 0); 
 
     $('#menuSpecials').fadeTo(200, 2); 
 
     $("#lunchMenuActive").removeClass('btn-info').addClass('btn-primary'); 
 
     $("#breakfastButtonActive").removeClass('btn-info').addClass('btn-primary'); 
 
     $("#specialsMenuActive").removeClass('btn-primary').addClass('btn-info'); 
 
    }); 
 
});

#menuLunch , #menuSpecials 
 
{ 
 
display:none; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="allMenus"> 
 
    <div id="menuButtons"> 
 
     <div id="breakfastButton"> 
 
      <button id="breakfastButtonActive" class="btn btn-large btn-info" data-toggle="button" type="button">Breakfast</button> 
 
     </div> 
 
     <div id="lunchButton"> 
 
      <button id="lunchMenuActive" class="btn btn-large btn-primary" data-toggle="button" type="button">Lunch</button> 
 
     </div> 
 
     <div id="specialsButton"> 
 
      <button id="specialsMenuActive" class="btn btn-large btn-primary" data-toggle="button" type="button">Weekly Specials</button> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="menuBreakfast"> 
 
    <img src="http://dummyimage.com/342x50/cccccc/000000.jpg&text=Breakfast" width="342" alt="" /> 
 
</div> 
 
<div id="menuLunch"> 
 
    <img src="http://dummyimage.com/342x50/cccccc/000000.jpg&text=Lunch" width="342" height="50" alt="" /> 
 
</div> 
 
<div id="menuSpecials"> 
 
    <img src="http://dummyimage.com/342x50/cccccc/000000.jpg&text=Specials" width="342" alt="" /> 
 
    <div id="weeklySpecialsLabel">Weekly Specials</div> 
 
    <div id="redUnderline"></div> 
 
    <div id="weeklySpecialsDays"> 
 
     <div id="mondayLabel">Monday</div> 
 
     <div id="tuesdayLabel">Tuesday</div> 
 
     <div id="wednesdayLabel">Wednesday</div> 
 
     <div id="thursdayLabel">Thursday</div> 
 
     <div id="fridayLabel">Friday</div> 
 
     <div id="saturdayLabel">Saturday</div> 
 
    </div> 
 
</div>

来源

2015-01-21 00:43:53

Bootply不起作用。此外，我更新了我的代码基于你说什么，它仍然无法正常工作。有什么建议么？ – user6680 2015-01-21 00:55:52

@ user6680 Bootply工作正常，但该应用程序已关闭，如错误消息所示。它也在这个小提琴http://jsfiddle.net/w4zx483p/没有引导样式。 – 2015-01-21 00:58:12

我可以看到它在jsfiddle中工作，我使用了建议的更改，但问题仍然存在。也许你可以告诉我是什么原因导致现场演示的问题。 http://www.andrewhnovak.com/SleepingMoonCafe/SleepingMoonCafeSite/index.html – user6680 2015-01-21 01:18:16

按钮更改图像

回答

相关问题