JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="colormenu">
<ul class="colchange">
<li class='red'><a href='#' class='click' data-color='#e74c3c'></a>
</li>
<li class='green'><a href='#' class='click' data-color='#2ecc71'></a>
</li>
<li class='blue'><a href='#' class='click' data-color='#3498db'></a>
</li>
<li class='yellow'><a href='#' class='click' data-color='#f1c40f'></a>
</li>
<li class='black'><a href='#' class='click' data-color='#222'></a>
</li>
<li class="links"><a href="#">Changer</a>
</li>
</ul>
</div>
<div class="bar2">this is Bar 2</div>
<div class="bar3"></div>
CSS
body {
background: #E2E2E2;
font-family:Tahoma, sans-serif;
}
.bigbar {
background: #FFF;
height:50px;
line-height::;
padding:0px 20px;
}
.bar2, .bar3 {
background: #FFF;
height:50px;
line-height:50px;
padding:0px 20px;
box-shadow: 0px 0px 8px #111;
margin-top:30px;
}
.colormenu {
width:auto;
height:40px;
line-height:40px;
background:#FFF;
padding: 10px;
}
.colormenu ul {
margin: 0;
padding:0;
}
.colormenu ul li {
list-style:none;
margin:0;
display:inline-block;
}
.colormenu ul li a {
padding: 10px 20px;
display:inline;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2);
}
.red {
background: #e74c3c;
}
.green {
background: #2ecc71;
}
.blue {
background: #3498db;
}
.yellow {
background: #f1c40f;
}
.black {
background: #222;
}
.links {
float:right;
}
.linkcolor {
color: #999;
}
JavaScript
jQuery(function ($) {
var color = $.cookie('color');
$('.click').on('click', function (e) {
color = $(this).data('color')
$('body, .bar3').css('background', color);
$('a:link, .bar2').css('color', color);
$.cookie('color', color, {
expires: 365,
path: '/'
});
return false;
}).filter(function () {
return $(this).data('color') === color
}).click()
});