如何两个按钮控制两个div

默认页面是div1显示，div2隐藏页面，
之后点击按钮2 ，实现div2的显示，div1隐藏，
然后在点击div1实现div2的隐藏 div1 的显示

我下面的html页面，只能实现按钮2，切换，然后就失效了，我应该如何修改


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
       <button type="submit" value="在线支付" onclick="ab1()">按钮1</button>
              <button type="submit" value="在线支付" onclick="ab2()">按钮2</button>

<div id="div1" style="display:block">
    div111111111111111111
</div><br/>
<div id="div2" style="display: none;border:1px solid red">
    div22222222222222222 </div>

    </body>
    <script>
         var div1=document.getElementById("div1");
          var div2=document.getElementById("div2");
          
             function ab2(){  
        if(div1.style.display=="block"){  
            div1.style.display="none";
            div2.style.display="block";
        }
        }
         function ab1(){  
        if(div1.style.display=="none"){
                div2.style.display=="none";
                div1.style.display=="block";
        }
        }

两个按钮函数中的if条件判断是不是多余了