js应用例子——选项卡

//这是3个选项。点击选项可以实现下面三个div的转换。
<div class="gy_head" style="color:#999" guanlian="one">加入我们</div>
<div class="gy_head" guanlian="two">联系我们</div>
<div class="gy_head" guanlian="three">了解更多</div>
</div>

//这是第一个div（one）
<div id="neirong">
<div class="neirong" id="one"><div id="nr_first_datu"></div><div id="nr_first_wz">
人是我们最重要的资产，我们敞开胸怀，欢迎您的加入！</div><div id="nr_first_zp">前往招聘首页</div>

//这是第二个div

</div> <div class="neirong" id="two"><div id="nr_second_datu"></div><div id="nr_second_wz1"><div id="nr_second_wone">
<h4>客户服务</h4><p>联系客服：<a href="denglu.html">在线咨询</a></p><p>服务时间：8:30-20:00</p><p>联系电话：12333333</p></div>
<div id="nr_second_wtwo"><h4>商务合作</h4><p>联系人：王先生</p><p>QQ：330442578</p><p>Email:123@jiawei.com</p></div></div>
<div id="nr_second_wz2"><div class="nr_second_wz_two"><h4>市场合作</h4><p>联系人：刘</p><p>QQ：12345667</p><p>Email:123@jiawei.com</p></div>
<div class="nr_second_wz_two"><h4>企业服务商</h4><p>联系人：李</p><p>QQ：12345666</p><p>Email:123@jiawei.com</p></div></div></div>

//第三个
<div class="neirong" id="three" ><div id="nr_three_datu"></div><div id="nr_three_nr">

<ul><li class="nr_li"><div class="nr_xiaotu"><img src="img/j1.jpg" width="276" height="139" /></div></li><div class="ling"><span class="nr_xiaotu_wz">最新动态</span></div>

<li class="nr_li"><div calss="nr_xiaotu"><img src="img/j2.jpg" width="275" height="139" /></div></li><div class="ling"><span class="nr_xiaotu_wz">宣传视频</span></div>

<li class="nr_li"><div calss="nr_xiaotu"><img src="img/j3.jpg" width="276" height="139"></div></li><div class="ling"><span class="nr_xiaotu_wz">人文关怀</span></div><li class="nr_li"><div calss="nr_xiaotu"><img src="img/j4.jpg" width="276" height="139"/></div></li><div class="ling"><span class="nr_xiaotu_wz">行业报告</span></div></ul></div></div></div></div>

//下面是js

var gy = document.getElementsByClassName("gy_head");//获取三个选项卡class
for(var i=0;i<gy.length;i++)

{//超过一个都得用for循环
gy[i].onclick = function(){ //给三个选项卡加点击事件
for(var i=0;i<gy.length;i++){//让选项卡字体或者背景色不变
gy[i].style.color = "black";//这是实现的第一个onclick

　　　　　　　　　　　 }
this.style.color = "#999";//点击的这个变色
var se = this.getAttribute("guanlian");//这个方法是用来找关联选项卡下面各自对应的DIV
var nr = document.getElementsByClassName("neirong");找到div
for(var i=0;i<nr.length;i++){nr[i].style.display = "none";}
//让相对应的div实现点击效果document.getElementById(se).style.display = "block";
}
}