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

.header{background: #dedede;width: 500px;height: 80px;margin: 0 auto;display: block;}

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); // } // }