原生js实现选项卡

1 html

    <div id="app" class="app">
        <div class="header">
            <span class="choose">精选</span>
            <span>社会</span>
            <span>娱乐</span>
            <span>体育</span>
        </div>
        <div class="body">
            <p class="choose">精选社会新闻</p>
            <p>社会新闻内容</p>
            <p>娱乐新闻内容</p>
            <p>体育新闻内容</p>
        </div>
    </div>

2 css

    <style>
        .app {
            border: 1px solid #000;
            display: inline-block;
        }
        .app .header {
            line-height: 36px;
        }
        .app .header span {
            padding: 0 10px;
            font-size: 18px;
        }
        .app .header span.choose {
            color: red;
        }
        .app .body {
            height: 150px;
            padding: 10px;
        }
        .app .body p {
            display: none;
        }
        .app .body p.choose {
            display: block;
        }
    </style>

3 js

<script>
var app = document.getElementById('app');
var spans = app.getElementsByTagName('span');
var ps = app.getElementsByTagName('p');
// 绑定事件
for (var i = 0,len = spans.length; i < len; i++){
    spans[i].index = i;
    spans[i].onclick = function(){
        // 排他法设置样式
        // 清除所有
        for (var j = 0; j < len; j++){
            // 清除每一个span的类
            spans[j].className = '';
        }
        // 设置被点击的span类
        spans[this.index].className = 'choose';
        // 对p使用排他
        for (var k = 0,plen = ps.length; k < plen; k++){
            ps[k].className = '';
        }
        ps[this.index].className = 'choose';
    }
}
</script>

效果展示