JSFiddle - React, Tailwind, and code Playground

by walker

HTML

<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/metro/easyui.css">
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<table height="100%">
    <td width="120" valign="top">
    <ul id="abc">
        <li class="active"><a href="#0">About</a></li>
        <li><a href="#1">My Document</a></li>
        <li><a href="#2">Help</a></li>
    </ul>
    </td>
    <td>
    <div id="tt" style="width:450px;height:250px">
        <div title="About" style="padding:10px">
            <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>
        </div>
        <div title="My Documents" style="padding:10px">
            page2
        </div>
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
            This is the help content.
        </div>
    </div>
    </td>
</table>

CSS

#abc li{list-style:none; list-style-position:outside; margin-bottom:3px;}
#abc li.active a{background:#585; color:#fff;}
li a{color:gray; text-decoration:none; padding:3px 5px; font-size:12px;}

JavaScript

$(function(){
    $('#tt').tabs({
        onSelect:function(title,index){
            getHighlight(index);
        }
    });
    $("#abc li").click(function(){
        $("#tt").tabs("select",$(this).index());
    });
    function getHighlight(index){
        $(".active").removeClass("active");
        $("#abc li").each(function(i,m){
            if(i==index) $(m).addClass("active");
        });
    };
});