Javascript jQuery-使用条件语句更改主体的背景颜色_Javascript_Jquery_Html

Javascript jQuery-使用条件语句更改主体的背景颜色

javascript jquery html

Javascript jQuery-使用条件语句更改主体的背景颜色,javascript,jquery,html,Javascript,Jquery,Html,我有一些div，默认情况下只有一个可见，所有其他div都隐藏。每个div都有不同的背景色。根据单击时的一些按钮，将显示不同的div 我需要检查显示的是哪个div，基于此，我想更改body background NOT on button click事件我还有一些其他按钮下一个/上一个移动到div中，如果我在按钮上更改颜色，当我使用这些按钮时，所有div的颜色都保持不变！！为此，我想做一个独立的函数，当div被更改时检查它我有一个jQuery代码，当我显示一个div时，条件为true$（'#

我有一些div，默认情况下只有一个可见，所有其他div都隐藏。每个div都有不同的背景色。根据单击时的一些按钮，将显示不同的div

我需要检查显示的是哪个div，基于此，我想更改body background NOT on button click事件

我还有一些其他按钮下一个/上一个移动到div中，如果我在按钮上更改颜色，当我使用这些按钮时，所有div的颜色都保持不变！！为此，我想做一个独立的函数，当div被更改时检查它

我有一个jQuery代码，当我显示一个div时，条件为true

$（'#divID'）。css（'display'）=='block'

为true，背景颜色应该更改，但它不起作用

jsfiddle：我的HTML代码：

<body>
<br/><br/><br/>
<div id="ad1" style="display:block;" > Div content 1</div><br/>
<div id="ad2" style="display:none;"  > Div content 2</div><br/>
<div id="ad3" style="display:none;"  > Div content 3</div><br/>
<div id="ad4" style="display:none;"  > Div content 4</div><br/>
<br/><br/><br/>
<button id='button1'> click 1</button>
<button id='button2'> click 2</button>
<button id='button3'> click 3</button>
<button id='button4'> click 4</button>
</body>

这是一本书

请尝试以下代码：

$(document).ready(function () {  
    $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#ebb614');
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#acb7a8');
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
        $("body").css('background-color', '#4f795b');
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
        $("body").css('background-color', '#7f7a6e');
    });
});

问题：在代码中，您没有更改按钮单击事件的背景。您只需在第一次加载时检查它。

请使用下面的代码片段或

方法1:

<body> 
<br />
<br />
<div id="ad1" style="display: block;">Div content 1</div>
<br />
<div id="ad2" style="display: none;">Div content 2</div>
<br />
<div id="ad3" style="display: none;">Div content 3</div>
<br />
<div id="ad4" style="display: none;">Div content 4</div>
<br />
<br />
<br />
<br />
<button id='button1'>click 1</button>
<button id='button2'>click 2</button>
<button id='button3'>click 3</button>
<button id='button4'>click 4</button>

<script>

    $(document).ready(function () {


        $('#button1').on('click', function () {
            $('#ad1').show();
            $('#ad2 ,#ad3 , #ad4').hide();
            test(1);
        });
        $('#button2').on('click', function () {
            $('#ad2').show();
            $('#ad1 ,#ad3 , #ad4').hide();
            test(2);
        });
        $('#button3').on('click', function () {
            $('#ad3').show();
            $('#ad2 ,#ad1 , #ad4').hide();
            test(3);
        });
        $('#button4').on('click', function () {
            $('#ad4').show();
            $('#ad2 ,#ad3 , #ad1').hide();
            test(4);
        });
    });

    function test(id) {

        if (id == 1) {
            $("body").css('background-color', '#ebb614');
        }
        if (id == 2) {
            $("body").css('background-color', '#acb7a8');
        }
        if (id == 3) {
            $("body").css('background-color', '#4f795b');
        }
        if (id == 4) {
            $("body").css('background-color', '#7f7a6e');
        }
    }

</script>
<style>
    body {
        height: 5000px;
        background-color: #4e795b;
        margin: 0px;
        padding: 0px;
    }
</style>
</body>

<body>
    <div id="ad1" style="display: block;">Div content 1</div>
    <br />
    <div id="ad2" style="display: none;">Div content 2</div>
    <br />
    <div id="ad3" style="display: none;">Div content 3</div>
    <br />
    <div id="ad4" style="display: none;">Div content 4</div>
    <br />
    <br />
    <br />
    <br />
    <button id='button1'>click 1</button>
    <button id='button2'>click 2</button>
    <button id='button3'>click 3</button>
    <button id='button4'>click 4</button>

    <script>

        $(document).ready(function () {


            $('#button1').on('click', function () {
                $('#ad1').show();
                $('#ad2 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button2').on('click', function () {
                $('#ad2').show();
                $('#ad1 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button3').on('click', function () {
                $('#ad3').show();
                $('#ad2 ,#ad1 , #ad4').hide();
                test();
            });
            $('#button4').on('click', function () {
                $('#ad4').show();
                $('#ad2 ,#ad3 , #ad1').hide();
                test();
            });
        });

        function test(id) {
            if ($('#ad1').css('display') == 'block') {
                $("body").css('background-color', '#ebb614');
            }
            if ($('#ad2').css('display') == 'block') {
                $("body").css('background-color', '#acb7a8');
            }
            if ($('#ad3').css('display') == 'block') {
                $("body").css('background-color', '#4f795b');
            }
            if ($('#ad4').css('display') == 'block') {
                $("body").css('background-color', '#7f7a6e');
            }
        }

    </script>
    <style>
        body {
            height: 5000px;
            background-color: #4e795b;
            margin: 0px;
            padding: 0px;
        }
    </style>
</body>






分区内容1


分区内容2


分区内容3


分区内容4








单击1
点击2
点击3
点击4
$（文档）.ready（函数（）{
$（'#button1'）。在（'click'，函数（）{
$（'#ad1'）.show（）；
$（'#ad2，#ad3，#ad4'）。隐藏（）；
试验（1）；
});
$（'#按钮2'）。在（'单击'，函数（）{
$（'#ad2'）.show（）；
$（'#ad1，#ad3，#ad4'）。隐藏（）；
试验（2）；
});
$（'#按钮3'）。在（'单击'，函数（）{
$（'#ad3'）.show（）；
$（'#ad2，#ad1，#ad4'）。隐藏（）；
试验（3）；
});
$（'#按钮4'）。在（'click'，函数（）{
$（'#ad4'）.show（）；
$（'#ad2，#ad3，#ad1'）。隐藏（）；
试验（4）；
});
});
功能测试（id）{
如果（id==1）{
$（“body”）.css（'background-color'，'#ebb614'）；
}
如果（id==2）{
$（“body”）.css（'background-color'，'#acb7a8'）；
}
如果（id==3）{
$（“body”）.css（'background-color'，'#4f795b'）；
}
如果（id==4）{
$（“body”）.css（'background-color'，'#7f7a6e'）；
}
}
身体{
高度：5000px；
背景色：#4e795b；
边际：0px；
填充：0px；
}

方法2:

<body> 
<br />
<br />
<div id="ad1" style="display: block;">Div content 1</div>
<br />
<div id="ad2" style="display: none;">Div content 2</div>
<br />
<div id="ad3" style="display: none;">Div content 3</div>
<br />
<div id="ad4" style="display: none;">Div content 4</div>
<br />
<br />
<br />
<br />
<button id='button1'>click 1</button>
<button id='button2'>click 2</button>
<button id='button3'>click 3</button>
<button id='button4'>click 4</button>

<script>

    $(document).ready(function () {


        $('#button1').on('click', function () {
            $('#ad1').show();
            $('#ad2 ,#ad3 , #ad4').hide();
            test(1);
        });
        $('#button2').on('click', function () {
            $('#ad2').show();
            $('#ad1 ,#ad3 , #ad4').hide();
            test(2);
        });
        $('#button3').on('click', function () {
            $('#ad3').show();
            $('#ad2 ,#ad1 , #ad4').hide();
            test(3);
        });
        $('#button4').on('click', function () {
            $('#ad4').show();
            $('#ad2 ,#ad3 , #ad1').hide();
            test(4);
        });
    });

    function test(id) {

        if (id == 1) {
            $("body").css('background-color', '#ebb614');
        }
        if (id == 2) {
            $("body").css('background-color', '#acb7a8');
        }
        if (id == 3) {
            $("body").css('background-color', '#4f795b');
        }
        if (id == 4) {
            $("body").css('background-color', '#7f7a6e');
        }
    }

</script>
<style>
    body {
        height: 5000px;
        background-color: #4e795b;
        margin: 0px;
        padding: 0px;
    }
</style>
</body>

<body>
    <div id="ad1" style="display: block;">Div content 1</div>
    <br />
    <div id="ad2" style="display: none;">Div content 2</div>
    <br />
    <div id="ad3" style="display: none;">Div content 3</div>
    <br />
    <div id="ad4" style="display: none;">Div content 4</div>
    <br />
    <br />
    <br />
    <br />
    <button id='button1'>click 1</button>
    <button id='button2'>click 2</button>
    <button id='button3'>click 3</button>
    <button id='button4'>click 4</button>

    <script>

        $(document).ready(function () {


            $('#button1').on('click', function () {
                $('#ad1').show();
                $('#ad2 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button2').on('click', function () {
                $('#ad2').show();
                $('#ad1 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button3').on('click', function () {
                $('#ad3').show();
                $('#ad2 ,#ad1 , #ad4').hide();
                test();
            });
            $('#button4').on('click', function () {
                $('#ad4').show();
                $('#ad2 ,#ad3 , #ad1').hide();
                test();
            });
        });

        function test(id) {
            if ($('#ad1').css('display') == 'block') {
                $("body").css('background-color', '#ebb614');
            }
            if ($('#ad2').css('display') == 'block') {
                $("body").css('background-color', '#acb7a8');
            }
            if ($('#ad3').css('display') == 'block') {
                $("body").css('background-color', '#4f795b');
            }
            if ($('#ad4').css('display') == 'block') {
                $("body").css('background-color', '#7f7a6e');
            }
        }

    </script>
    <style>
        body {
            height: 5000px;
            background-color: #4e795b;
            margin: 0px;
            padding: 0px;
        }
    </style>
</body>


分区内容1


分区内容2


分区内容3


分区内容4








单击1
点击2
点击3
点击4
$（文档）.ready（函数（）{
$（'#button1'）。在（'click'，函数（）{
$（'#ad1'）.show（）；
$（'#ad2，#ad3，#ad4'）。隐藏（）；
test（）；
});
$（'#按钮2'）。在（'单击'，函数（）{
$（'#ad2'）.show（）；
$（'#ad1，#ad3，#ad4'）。隐藏（）；
test（）；
});
$（'#按钮3'）。在（'单击'，函数（）{
$（'#ad3'）.show（）；
$（'#ad2，#ad1，#ad4'）。隐藏（）；
test（）；
});
$（'#按钮4'）。在（'click'，函数（）{
$（'#ad4'）.show（）；
$（'#ad2，#ad3，#ad1'）。隐藏（）；
test（）；
});
});
功能测试（id）{
如果（$（'#ad1'）.css（'display'）=='block'）{
$（“body”）.css（'background-color'，'#ebb614'）；
}
如果（$（'#ad2'）.css（'display'）='block'））{
$（“body”）.css（'background-color'，'#acb7a8'）；
}
如果（$（'#ad3'）.css（'display'）='block'））{
$（“body”）.css（'background-color'，'#4f795b'）；
}
如果（$（'#ad4'）.css（'display'）=='block'）{
$（“body”）.css（'background-color'，'#7f7a6e'）；
}
}
身体{
高度：5000px；
背景色：#4e795b；
边际：0px；
填充：0px；
}

您给定的代码中存在以下问题： 1.您已经在document.ready（）中实现了背景色更改逻辑，但是您必须在每次单击事件时调用此逻辑来更改背景色。

2.您已经在DIV中添加了两次ID标记。

您需要在每次单击按钮时更新背景色，因为if条件只会检查document ready

 $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#ebb614');
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
         $("body").css('background-color', '#acb7a8');
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
        $("body").css('background-color', '#4f795b');
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
        $("body").css('background-color', '#7f7a6e');
    });

这是你的电话号码

“为此，我想制作一个独立的函数，在你刚才回答了你的问题

你回答了你的问题。把它放在函数中。当他们点击并加载页面时调用它

在代码中，仅在加载时设置背景色。每次更改选项卡的可见性时，都需要运行检查。因此，将该代码放在一个方法中，并在单击按钮时触发它，或者只在单击方法中设置BG颜色的行

或

您可以使用数据属性和简单的选择器来选择其他元素，从而简化代码。不需要使用重复代码的巨大if-else块

$（“按钮[数据id]”）。在（“单击”，函数（）{
var btnClicked=$（this）.addClass（“active”）；//单击的按钮
btnClicked.sides（“.active”）.removeClass（“active”）；
$（“body”）.css（“背景色”，btnClicked.data（“颜色”）；//读取数据属性并设置颜色
$（.data.active”）.removeClass（“active”）；//从已选择的元素中删除类
$（btnClicked.data（“id”）.addClass（“active”）；//添加活动类以显示内容
});
$（“#按钮1”）。单击（）//激活第一个选项卡
$（“button.page”）。在（“单击”，函数（）{
var dir=$（this）.data（“dir”），
btnTabs=$（“按钮[数据id]”），
activeBtn=btnT