原生JS实现简单页面效果

选项卡效果

实现思路：

1 布局三个button用于点击选项卡，3个div用于显示不同的内容
2 两层循环：
（1）外层点击切换button，添加点击效果和样式
（2）内层控制实现内容div的隐藏显示

实现过程

布局和样式如下：

#box div {
   width: 300px;
   height: 200px;
   border: 1px solid red;
   font-size: 30px;
   line-height: 200px;
   text-align: center;
   display: none;
}
.active {
   background: red;
}
<div id="box">
    <button class="active">新闻button>
    <button>体育button>
    <button>财经button>
    <div style="display: block;">新闻div>
    <div>体育div>
    <div>财经div>
div>

var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('button');
var aDiv = oBox.getElementsByTagName('div');
for (var i = 0; i < aBtn.length; i++) {
     
    aBtn[i].index = i;//给每一个btn设置下标
    aBtn[i].onclick = function() {
     
        for (var i = 0; i < aBtn.length; i++) {
     
            aBtn[i].className = '';
            aDiv[i].style.display = 'none';
        }
        this.className = 'active';
        aDiv[this.index].style.display = 'block'//注意中括号中的this.index
    }
}

实现效果如下

省市区三级联动

实现思路

页面布局

<select class="first">select>
<select class="second">select>
<select class="third">select>

实现代码：

window.onload = function(){
     
var select = document.getElementsByTagName('select');
//渲染省
for (var i = 0; i <data.length ; i++) {
     
    var option = document.createElement('option');
    var text = document.createTextNode(data[i].name)
    option.appendChild(text);
    select[0].appendChild(option);
}
//初始化市区数据
selectCity(0);
selectArea(0,0)
//改变省时触发事件
select[0].onchange = function(){
     
    //console.log(this.selectedIndex+"被点击");
    selectCity(this.selectedIndex);
    selectArea(this.selectedIndex,0);
    index = this.selectedIndex;
    console.log(index);
}
//改变市时
select[1].onchange = function(){
     
    //console.log("市的第"+this.selectedIndex+"条被点击！！！");
    console.log("当前索引"+index);
    selectArea(index,this.selectedIndex)
}
//渲染市
function selectCity(cityIndex){
     
select[1].innerHTML = "";
    var cityList = data[cityIndex].city;
    console.log(cityList)
    for (var i = 0; i <cityList.length ; i++) {
     
        var option = document.createElement('option');
        var text = document.createTextNode(cityList[i].name)
        option.appendChild(text);
        select[1].appendChild(option);
    }
}
//渲染区县
function selectArea(cityIndex,areaIndex){
     
	select[2].innerHTML = "";
	var areaList = data[cityIndex].city[areaIndex].area;
	console.log(areaList);
	for (var i = 0; i < areaList.length; i++) {
     
	    var option = document.createElement('option');
	    var text = document.createTextNode(areaList[i])
	    option.appendChild(text);
	    select[2].appendChild(option);
	}
}
}
</script>

数据如下

var data = [
    {
     "name":"北京",
     "city":[
         {
     "name":"北京市", "area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区"]}
     ]
    },
    {
      "name":"甘肃省",
      "city":[
        {
     "name":"白银市", "area":["白银市区","靖远县","景泰县","平川区","会宁县"]},
        {
     "name":"兰州市", "area":["城关区","七里河区","安宁区","西固区","榆中县","兰州新区","高新区"]}
      ]
    }
];

实现效果：