Menu
I have some divs and by default only one is visible and all others are hidden. Every div has a different background color. Based on some buttons when are clicked , different divs are displayed.
I need to check which div is displayed and based on that I want to change the body background NOT on button click event.
I have some other buttons next/prev that move into divs, and if I change color on button click when I use those buttons the color stay the same for all divs!! For that i want to make an independent function that will check when divs are changed?
I have a jQuery code, which when a div i displayed the condition is true $('#divID').css('display') == 'block' is true the background color should be changed but it's not working!.
jsfiddle: DEMO My HTML code:
<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>
and jquery code:
$(document).ready(function () {
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');
}
$('#button1').on('click', function () {
$('#ad1').show();
$('#ad2 ,#ad3 , #ad4').hide();
});
$('#button2').on('click', function () {
$('#ad2').show();
$('#ad1 ,#ad3 , #ad4').hide();
});
$('#button3').on('click', function () {
$('#ad3').show();
$('#ad2 ,#ad1 , #ad4').hide();
});
$('#button4').on('click', function () {
$('#ad4').show();
$('#ad2 ,#ad3 , #ad1').hide();
});
});
Please try with the below code snippet or demo.
Method 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>
Method 2:
<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>
Below issue is exists in your given code: 1. you have implemented background color change logic in document.ready() but you have to recall this logic on every click event to change the background color. 2. you have added ID tag twice in your DIV.
84
You need to update background color on every button click because if condition will only check on 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');
});
here is the fiddle
34
answered Dec 10 '25 09:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With