HTML Tabs and Sections jQuery JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function(){
        $(".section").hide();
        $("#sec3").show();

        $(".secbtn").click(function(){
          $(".section").hide();
          var sec = $(this).attr("sec");
          $("#"+sec).show();
        });
      });
    </script>
  </head>
  <body>
    <br>
    <div class="btn-group btn-group-justified">
      <a sec="sec1" href="#" class="secbtn btn btn-primary">Section #1</a>
      <a sec="sec2" href="#" class="secbtn btn btn-primary">Section #2</a>
      <a sec="sec3" href="#" class="secbtn btn btn-primary">Section #3</a>
    </div>

    <hr>
    <br><br><br>
    <div id="sec1" class="container section">
      <div class="row">
        <div class="alert alert-danger">
          <h1>HELP this is a section</h2>
          <pre>
            This is the help section.
            I should be helpful
            I hope it is
          </pre>

          </div>
      </div>
      <div class="row">
        <div class="alert alert-danger">
          <h1>HELP this is a section</h2>
          <pre>
            This is the help section.
            I should be helpful
            I hope it is
          </pre>

          </div>
      </div>
      <div class="row">
        <div class="alert alert-danger">
          <h1>HELP this is a section</h2>
          <pre>
            This is the help section.
            I should be helpful
            I hope it is
          </pre>

          </div>
      </div>
    </div>

    <div id="sec2" class="container section">
      <div class="row">
        <div class="alert alert-info">
          <h1>Hey this is another section</h1>
          <pre>
              This is some information
              I hope it is helpful
          </pre>
          </div>


      </div>
    </div>
    <div id="sec3" class="container section">
      <div class="row">
        <div class="alert alert-success">
          <h1>Section #3</h1>
          YES it is one more section</div>
      </div>
    </div>
  </body>
</html>