javascript 原生JS实现 选项卡的切换(两种方法)
最近在学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. 开战 也许以后会发一下，看情况吧
