#p1.active => #p1 .active

看看 https://jsfiddle.net/chexian/...

第一个for循环里的

aBtn.onclick = function(){...};

替换成

aBtn.onclick = (function(i){ ... })(i)

for循环里面不是块级作用域，i的值早已变化。
具体解释参看一下 js闭包和作用域。

css方面的问题

p1.active{
    background: yellow;
}

p1.active是给#p加class="active"的，不是给#p1的子集加.active.

js的问题，以下是部分代码

for (var i = 0; i < aBtn.length; i++){
    aBtn[i].className='';
}
    this.className='active';

你不觉得你上面aBtn[i].className='';和this.className='active';有点冲突吗？
this就是当前的btn啊

你都没有定义class为active的样式

#p1.active{
    background: yellow;
}

这句的意思是class为active,id为p1的元素，并不是 #p1下的class为active的元素啊
应该是这样的 #p1 .active{}

楼主，把下面的这部分替换你现有对应的之后，看看是不是达到你想要的结果了
aBtn[i].onclick=function(){

for(var j = 0; j < aBtn.length; j++){
    aBtn[j].className='';
}
aBtn[i].className='active';

};