最近在學JS 也在找工作，更新的慢，但是我會不斷更新記錄心得和學到的東西，分享出來！
首先html和css的框先奉上，其實不用定位也可以，你們可以自己嘗試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
/* CSS樣式制作 */
div{
height:220px;
position: absolute;
z-index: -999;
width: 280px;
top: 47px;
border:2px solid darkred;
left: 43px;
display: none;
}
li{
width:80px;
height:29px;
text-align: center;
line-height: 30px;
border:1px solid #ccc;
float:left;
margin-left: 6px;
list-style: none;
cursor: pointer;
}
.a{
border-bottom: 5px solid white;
border-top:2px solid darkred ;
}
</style>
</head>
<body>
<!-- HTML頁面布局 -->
<ul>
<li class="a">房產</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div style="display: block;">
<p>275萬購昌平鄰鐵三居 總價20萬買一居</p>
<p> 200萬內購五環三居 140萬安家東三環</p>
<p> 北京首現零首付樓盤 53萬購東5環50平</p>
<p> 京樓盤直降5000 中信府 公園樓王現房</p>
</div>
<div>
<p>40平出租屋大改造 美少女的混搭小窩</p>
<p>經典清新簡歐愛家 90平老房煥發新生</p>
<p>新中式的酷色溫情 66平撞色活潑家居</p>
<p>瓷磚就像選好老婆 衛生間煙道的設計</p>
</div>
<div>
<p>通州豪華3居260萬 二環稀缺2居250w甩</p>
<p>西3環通透2居290萬 130萬2居限量搶購</p>
<p>黃城根小學學區僅260萬 121平70萬拋!</p>
<p>獨家別墅280萬 蘇州橋2居優惠價248萬</p>
</div>
</body>
</html>
下面介紹第一種方法：
這種方法是最長用的也是最常見到的，很黃很暴力的一種方法，剛開始的時候我也想的是這一種，很簡單的，方便大家看懂我會在重要的位置注釋的
<script type="text/javascript">
// JS實現選項卡切換
window.onload=function(){
var li = document.querySelectorAll("li");//querySelectorAll這個標簽的作用是選取頁面所有的li標簽
var div = document.querySelectorAll("div");
for(var i=0;i<li.length;i++){
li[i].index = i;//給每個按鈕添加一個自定義屬性，存的是他們對應的索引值
li[i].onclick=function(){
for(var i=0;i<li.length;i++){
li[i].className=" ";
div[i].style.display="none";
};
this.className = "a";
div[this.index].style.display="block";//把當前點擊li的下表傳入div中，使其下標相同，因為他們都默認輸出的是 0 1 2 所以可以對應輸出
};
};
};
</script>
下面介紹第二種方法：
這個方法有一點跟上邊不同，就是不是很暴力，比較書生氣，這個方法是通過記錄你的點擊li的下標來記錄index值，從而設置樣式的
<script type="text/javascript">
// JS實現選項卡切換
window.onload = function() {
var li = document.querySelectorAll("li");
var div = document.querySelectorAll("div");
var last = li[0];//唯一不一樣的就是這兒，我剛也說了，這個地方記錄每次點擊的下標
for(var i=0; i<li.length; i++){
li[i].index = i;
li[i].onclick = function(){
last.className = "";
div[last.index].style.display ="none";
this.className = "a";
div[this.index].style.display="block";
last = this;//這個必須放到最后，等待全部執行完畢，回掉，把當前的index的值傳入last
}
}
}
</script>
好了 就這些了，希望能幫助到新手更好的學習javascript，其實解決方法很多，但是思路一定要正確，不能亂，具體在寫代碼時候的思路我今天就不再這兒將了，其實就是 1.列出來需求，2.列出 需求分析 3.開發思路 4. 開戰 也許以后會發一下，看情況吧