JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<script src="http://jsfiddle.net/Web_Code/6JQXB/embedded/result/"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="content-type" content="texthtml;charset=utf-8">
        <title>TabHost</title>
        <style type="text/css">
            #tab li {
                background-color: #3e3e3e;
                list-style: none;
                float: left;
                margin-left: 2px;
                color: white;
            }
            #tabContent {
                float: left;
                display: none;
                width: 242px;
                height: 150px;
            }
            #tabContent ul {
                list-style: none;
                background-color: #ccc;
                padding-left: 5px;
                margin-top: 0px;
            }
            #main {
                width: 250px;
                margin: 0 auto;
                height: 300px;
            }
        </style>
    </head>
    
    <body>
        <div id="main">
            <div style="margin-left:-42px">
                <ul id="tab">
                    <li onclick="javascript:display(1);" style="background-color:#ccc;color:black;">数 据 库</li>
                    <li onclick="javascript:display(2);">前台脚本</li>
                    <li onclick="javascript:display(3);">后台脚本</li>
                </ul>
            </div>
            <div id="tabContent" style="display:block">
                <ul>
                    <li>MySql</li>
                    <li>SQL Server</li>
                    <li>Oracle</li>
                    <li>DB2</li>
                </ul>
            </div>
            <div id="tabContent">
                <ul>
                    <li>HTML</li>
                    <li>Ruby</li>
                    <li>JavaScript</li>
                    <li>Python</li>
                </ul>
           ...

CSS

#tab li {
     background-color: #3e3e3e;
     list-style: none;
     float: left;
     margin-left: 2px;
     color: white;
 }
 #tabContent {
     float: left;
     display: none;
     width: 242px;
     height: 150px;
 }
 #tabContent ul {
     list-style: none;
     background-color: #ccc;
     padding-left: 5px;
     margin-top: 0px;
 }
 #main {
     width: 250px;
     margin: 0 auto;
     height: 300px;
 }

JavaScript

var divs = document.getElementById("main").getElementsByTagName("div");
		var lis = document.getElementById("tab").getElementsByTagName("li");

		function display(num) {
		    for (var i = 1; i < divs.length; i++) {
		        if (i == num) {
		            var con = divs[num];
		            con.style.display = "block";
		            lis[i - 1].style.backgroundColor = "#ccc";
		            lis[i - 1].style.color = "black";
		        } else {
		            divs[i].style.display = "none";
		            lis[i - 1].style.color = "white";
		            lis[i - 1].style.backgroundColor = "#3e3e3e";
		        }
		    }
		}