选项卡效果实现

选项卡效果实现

第一步：在body里设置ul、li、div

<div id="tab">
      <ul>
        <li>新闻</li>
        <li class="selectedLi">电影</li>
        <li>音乐</li>
    </ul>
    <div>新闻的内容</div>
    <div class="selectedDiv">电影的内容</div>
    <div>音乐的内容</div>
</div>

第二步：给内容设置样式style

<style>
  *{ 
    margin: 0;
    padding: 0
}
ul{
    list-style: none;
    text-align: center;
}
#tab{
    width: 500px;
    margin: 0 auto;
}
#tab ul li{
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid palegreen;
}
# tab ul li .selectedLi{
    background: palegreen;
}
#tab div {
    height: 250px;
    line-height: 250px;
    background: palegreen;
    display: none;
    text-align: center;
}
#tab div .selectedDiv {
    display: block;
}

</style>

第三步：在script中给li绑定事件

• 点击的li添加选中的类名，相应div也添加选中的类名，其他li和div移除类名
  1.获取元素
  2.给每个li绑定点击事件
  
  1. 处理点击时的逻辑，当前点击的li和对应的div添加类名，其他的元素的类名都移除

var oTab = document.getElementById("tab"),
    oLis = oTab.getElementsByTagName("li"),
    oDiv = oTab.getElementsByTagName("div");

function  change(n) {
    //移除所有的li和div的class名
    for(var i = 0; i < oLis.length; i++){
        oLis[i].className = " ";
        oDiv[i].className = " "; 
  }
  //给当前的li和div添加类名
  //可以保证只有一个li和div是被选中的
  oLis[n].className = "selectedLi";
  oDiv[n].className = "selectedDiv";
}
//通过for循环获取所有的li
//并给每个li绑定点击事件。
for (var i =0; i < oLis.length; i++){
        //通过自定义属性的方式
        //将i的值保存到num上
        oLis[i].num = i;
        oLis[i].onclick = function() {
          //this就是当前点击的元素  
          //this.num存储的就是当前点击元素的索引
          change(this.num)
      }
}