javascript 点击改变 class 名

Question

怎么实现 点击<标题1> class="a1" 后变为 class="b2" ，之后点击另外一个<标题2>class就变为变为 class="b2" ，<标题1>又变回为 class="a1"。总之就是点击改变class名，点击改变一个class 名 另一个就恢复原来的class名。（a标签不能改动。a 标签不能加ID或者跳转等。因为别的程序占了）

<li class="a1" ><a href="#">标题1</a></li>
<li class="a1" ><a href="#">标题2</a></li>
<li class="a1" ><a href="#">标题3</a></li> 

Answer 1

<li class="a1" ><a href="#">标题1</a></li>
<li class="a1" ><a href="#">标题2</a></li>
<li class="a1" ><a href="#">标题3</a></li> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$('li').each(function(index, el) {
    $(el).click(function(event) {
        /* Act on the event */
        $('li').attr('class','a1');
        $(this).attr('class','b2');
    });
});
</script>