JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
          <li><a href="#page1" data-toggle="tab">Page One</a></li>
          <li><a href="#page2" data-toggle="tab">Page Two</a></li>
        </ul>
    
    <div class="tab-content" style="width:100%;">
        <div class="tab-pane active" id="page1">
            <button type="button">Proceed to page 2</button>
        </div>
        <div class="tab-pane" id="page2">
            <p>Page 2 content here!</p>
        </div>
    </div>

JavaScript

$(document).ready(function() {
        $('#mf a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
            // ALSO, you were missing a closing paren, here!
        });
                            
        //two issues ... onclick inside your button is trying to access
        // your function before it's available... inline js like that, bad idea anyhow
        // so hook into it inside your DOM ready code here anyhow.
    
        var showPageTwo = function() {
            // secondly, you're looking at the wrong item!
            // li:eq(0) means "look at the first li in the array of li"
            $('#pageSwitcher li:eq(1) a').tab('show');
        };
        
        $(".tab-content").on("click","#page1 button", showPageTwo);
    });