"Header Color Selections"
Bootstrap 4.1.1 Snippet by ravindra93

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="header">
</div>
<div class="header_color">
<ul>
<li onclick="ColorChange('#f00');">Red</li>
<li onclick="ColorChange('green');">green</li>
<li onclick="ColorChange('blue');">blue</li>
</ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
.header{background: #dedede;width: 500px;height: 80px;margin: 0 auto;display: block;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function ColorChange(color){
$('.header').css("background", color);
}
// function ColorChange(color, tabColor1) {
// if (tabColor1 == 1) {
// if (color == '#fff') {
// $('#menubar').removeClass('menubar dark in');
// $('#menubar').addClass('menubar light in');
// $('#SchoolLogo').removeClass('navbar-header dark in');
// $('#SchoolLogo').addClass('navbar-header light in');
// }
// else {
// $('#menubar').removeClass('menubar light in');
// $('#menubar').addClass('menubar dark in');
// $('#SchoolLogo').removeClass('navbar-header light in');
// $('#SchoolLogo').addClass('navbar-header dark in');
// }
// }
// else {
// $('#app-navbar').css("background", color);
// }
// }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: