js如何实现点击按钮切换内容？

Question

想实现点击li来切换content内容，现在切换不了，请教是什么原因？
已改成class，但切换还是有问题

<style>
.content {width:310px;height:180px;font-size:20px;background-color:green;display:none;}
.btn {width:100px;}
.active {background-color:red;}
.show {display: block !important;}
</style>

<div>
    <ul>
    <li class="btn active">按钮1号</li>
    <li class="btn">按钮2号</li>
    <li class="btn">按钮3号</li>
    </ul>
</div>

<div class="content show">111111</div>
<div class="content">222222</div>
<div class="content">333333</div>

<script>
var aButton = document.getElementsByClassName("btn");
var aContent = document.getElementsByClassName("content");

for (var i = 0; i < aButton.length; i++) {
    aButton[i].index=i;
    aButton[i].onclick = function () {
        for (var j = 0; j < aButton.length; j++) {
            aButton[j].className = '';
            aContent[j].className = '';
        }
        this.className = 'active';
        aContent[this.index].className = 'show';
        };
    }
</script>

Answer 1

同一文档中，若id的值不是空字符串""，便必须是独特的；也就是说，不同元素的 ID 必须是不同的。文档

所以你通过 getElementById 拿到的 aButton aContent 都是一个 Element 对象，所以后面的循环和事件绑定都会出问题。

你可以改成用 class 标记和获取元素绑定事件。

----------分界线----------
你改成 class 还有问题是因为你在每次的 onclick 处理函数里面把所有元素的 class 都置为空了。
应该改为在处理函数中把所有的元素的 class 都置为默认的 btn 或 content，然后给当前点击的元素加上对应的 active 或 active。比如

for (var j = 0; j < aButton.length; j++) {
    aButton[j].className = 'btn '; // 注意空格不能少
    aContent[j].className = 'content ';
}
this.className += 'active';
aContent[this.index].className += 'show';
};

Answer 2

额......
首先 getElementById返回的不是数组，你应该使用class
另外多打印一些console去调试你的代码吧