JSFiddle - React, Tailwind, and code Playground

by twobin

HTML

<body>
<div id="tab">   
    <div class="nav">
        <ul>
            <li class="active"><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
        <a class="more" href="#">>>更多前端技术</a>
    </div>
    <div class="content">
        <div class="box">
            <div class="pic"><a href="#"></a></div>
            <ul class="pic_list">
                <li>
                    <h2>
                        <a href="#">新元素增强描述内容的能力</a>
                        <span>（1）</span>
                    </h2>
                    <p>HTML5新特性</p>
                </li>
                <li>
                    <h2>
                        <a href="#">新API让页面程序开发更简单</a>
                        <span>（2）</span>
                    </h2>
                    <p>HTML5新特性</p>
                </li>
                <li>
                    <h2>
                        <a href="#">用户可以编辑网页的部分内容</a>
                        <span>（3）</span>
                    </h2>
                    <p>HTML5新特性</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <div class="pic"><a href="#"></a></div>
            <ul class="pic_list">
                <li>
                    <h2>
                        <a href="#">直接设置圆角或个别圆角</a>
                        <span>（1）</span>
                    </h2>
                    <p>CSS3新特性</p>
                </li>
                <li>
                    <h2>
                        <a href="#">以CSS3的方式修改不透明度</a>
                        <span>（2）</span>
                    </h2>
                    <p>CSS3新特性</p>
                </li>
                <li>
                    <h2>
                        <a href="#">超酷超炫的阴影效果</a>
                        <span>（3）</span>
                    </h2>
                    <p>CSS3新特性</p>
                </li>
            </ul>
        </div>
        <div class="box">
            <div class="pic"><a...

CSS

/*页面初始化*/
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
body { margin-top: 50px; font-size: 12px; background: black; }
#tab { width: 490px; margin: 0 auto; position: relative; background-color: #fff; }
/*导航栏*/
#tab .nav { position: relative; z-index: 2; }
#tab .nav ul { width: 490px; height: 44px;  background-color: #d8d8d8; }
#tab .nav li { float: left; height: 44px; line-height: 44px; font-family: arial; }
#tab .nav li a { float: left; height: 44px; text-decoration: none; color: #999; padding: 0 20px; }
#tab .nav .active { background-color: green; }
#tab .nav .active a { background: ; color: #333; font-weight: bold; }
#tab .more { font-family: "宋体"; position: absolute; top: 16px; right: 20px; color: #999; text-decoration: none; }
#tab .more:hover { text-decoration: underline; font-weight: bold; right: 18px; }
#tab .content { position: relative; z-index: 2; width: 484px; overflow: hidden; margin-left: 1px; }
#tab .box { width: 444px; padding: 20px; overflow: hidden; display: none; }
#tab .pic { padding: 7px 0 0 7px; width: 189px; height: 115px; background-color: blue; float: left; }
#tab .pic_list { float: right; width: 232px; padding-left: 16px; display: inline-block; }
#tab .pic_list li { width: 232px; float: left; font-family: arial; line-height: 18px; margin-bottom: 4px; }
#tab .pic_list h2 { width: 232px; font-size: 12px; height: 18px; background: ; }
#tab .pic_list h2 a { height: 18px; text-decoration: none; color: #333; font-weight: bold; background: #fff; padding-right: 5px; float: left; }
#tab .pic_list h2 a:hover { text-decoration: underline; color:#D31A05; }
#tab .pic_list h2 span { height: 18px; color: #999; float: right; background: #fff; padding-left: 5px; }
#tab .pic_list p { color: #999; word-spacing: 10px; }

JavaScript

window.onload=function()
{
    var oTab=document.getElementById('tab');
    var aLi=getByClass(oTab, 'nav')[0].getElementsByTagName('li');
    var aA=oTab.getElementsByTagName('ul')[0].getElementsByTagName('a');
    var aDiv=getByClass(oTab, 'box');
    var i=0;	
	aDiv[0].style.display='block';    
    for(i=0; i<aLi.length; i++)
    {
        //保存当前aLi[i]的索引
        aLi[i].index=i;
        aLi[i].onclick=function()
        {
            //遍历，将aLi下所有类名清空，且aDix全部隐藏
            for(i=0; i<aLi.length; i++)
            {
                aLi[i].className='';
                aDiv[i].style.display='none';
            }
            //在当前aLi[i]下添加active类名，且显示当前的aDiv
            this.className='active';
            aDiv[this.index].style.display='block';
        };
        //获得焦点时立即失去焦点
        aA[i].onfocus=function(){this.blur();};
    }
};
//通过类名获取元素
function getByClass(oParent, sClassName)
{
    var aElm=oParent.getElementsByTagName('*');
    var aArr=[];
    for(var i=0; i<aElm.length; i++)
    {
        if(aElm[i].className==sClassName)
        {
            aArr.push(aElm[i]);
        }
    }
    return aArr;
}