JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="tabs">
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
            <li><a href="#fragment-3"><span>Three</span></a></li>
        </ul>

        <div id="fragment-1">
            <p>First tab is active by default:</p>
            <a class="nexttab" href="#fragment-2">Next Tab</a>
        </div>

        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
            <a class="nexttab" href="#fragment-3">Next Tab</a>
        </div>

        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
        </div>
    </div>

JavaScript

$("#tabs").tabs();
$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});