Question

我有3个按钮和3个图像。当按下一个按钮时，其他2个图像淡入不透明度：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');

});

}）;

Answer 1

它不起作用，因为脚本中menuBreakfast和menuLunch的ID与您使用breakfastMenu和lunchMenu的HTML中的ID不匹配。通过一些清理调整Bootply以添加和删除不同的类，而不是添加和删除应该保持相同的类以及添加设置#menuLunch的第二个Bootply }和#menuSpecials到display:none，因为最初#menuBreakfast处于活动状态（因此只显示早餐虚拟图像）。

正如评论中所提到的，Bootstrap已经停止了几分钟，所以另外作为堆栈代码：

$(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>

按钮改变图像

1 个答案: