原生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":["城關區","七里河區","安寧區","西固區","榆中縣","蘭州新區","高新區"]}
      ]
    }
];

實現效果：