JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id="menu">
    <ul>
        <li><a href="#">Show tab 1</a></li>
        <li><a href="#">Show tab 2</a></li>
    </ul>
</div>
<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>
    <div id="tab-1">
        This is tab 1<br/>
        <a href="#" id="a-goto-tab-2">Click here to go to tab 2</a>
    </div>
    <div id="tab-2">
        This is tab 2<br />
        <a href="#" id="a-goto-tab-1">Click here to go to tab 1</a>
    </div>
</div>

CSS

#menu, #tabs { float: left }
#menu { margin-right: 20px }
#tab-1 { color: green }
#tab-2 { color: red }

JavaScript

$(document).ready(function() {
    $("#tabs").tabs();

    $("#a-goto-tab-2").click(function() {
        $("#tabs").tabs("select",1);
        return false;
    });

    $("#a-goto-tab-1").click(function() {
        $("#tabs").tabs("select",0);
        return false;
    });

    $("#menu ul li a").each(function(index) {
        $(this).click(function() {
            $("#tabs").tabs("select",index);
        });
    });
});