Change colour of an element when clicked

Question

I cannot figure out how to change the colour of my menu elements when the " center " container or the " right " container is clicked (returning its state once clicked on again). Currently my 3 lines that are within my menu are white, I want to change them to red when these " center " and " right " containers are clicked.

HTML for menu and containers:

<div class="menu">
    <div class="line"></div>
    <div class= "container" id= "center">
        <h1 style="color:white"><a>LOREM IPSUM<a/></h1>
    </div>
    <div class="container" id= "right">
        <h1 style="color:white"><a>LOREM IPSUM</a></h1>
    </div>

CSS for menu elements:

.menu .line {
  height: 5px;
  width: 40px;
  background: #fff;
  position: absolute;
  top: 22.5px;
  left: 5px;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
  z-index: 100;
}
.menu .line:after, .menu .line:before {
  content: ' ';
  height: 5px;
  width: 40px;
  background: #fff;
  position: absolute;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}
.menu .line:before {
  top: -10px;
}
.menu .line:after {
  bottom: -10px;
}

Answer 1

Define new classes for the colors you want, eg

.red {
    color: red !important;
}
.green {
    color: green !important;
}

Then toggle them using jQuery:

$('#center').click(function() {
    $(this).find('h1').toggleClass('red');
});
$('#right').click(function() {
    $(this).find('h1').toggleClass('green');
});

Note: If you assign the original color using CSS then you don't need the !important.

Answer 2

我无法理解您的示例html，因此这是使用jQuery的.toggleClass的示例演示

Answer 3

Add an onClick() method

Html:

<h1 style="color:white" onclick="changeColor(this);"><a>LOREM IPSUM<a/></h1>

and add this function in the <script> tag:

function changeColor(element){
    element.style.color='red';
}