<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a3{
background-color: #0000FF;
}
.a4{
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div id="box">
<div id="box1" class="a1">123</div>
<div id="box2" class='a2 a4'>456</div>
</div>
</div>
</div>
<script src="jquery/jquery-3.2.1.js"></script>
<script>
var tn = document.getElementById('box');
var tn1 = document.getElementById('box1');
var tn2 = document.getElementById('box2');
tn.addEventListener('click', function(e) {
tn1.classList.add('a3')
tn2.classList.remove('a4')
})
</script>
</body>
</html>