js选项卡

HTML/CSS部分：

我的结构是这么写的：

每个选项的内容被嵌套在选项卡里。

ul li div。

ul是那个选项卡盒子，当然你还可以在上面弄个div什么的。

li当然是选项卡的选项咯。

div当然是每个选项显示出来的内容咯。根据语义化，这里的div视情况而定。比如选项内容是新闻列表时，这里可以就是li咯。

或者直接使用 dl dt dl 。

也可以使用不嵌套的方式。比如：

ul li 这是选项卡。

ul li 这是选项呀里面的内容。

使用样式把选项卡和内容黏合在一起去。

下面是每个选项内容嵌套在在相应选项卡下的HTML/CSS。

<!--
Author: XiaoWen
Create a file: 2016-12-07 09:04:12
Last modified: 2016-12-07 09:46:08
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项卡</title>
  <style>
    ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul{
      width: 300px;
      height: 150px;
      background: #ccc;
      overflow: hidden;
      position: relative;
    }
    ul li{
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: left;
      text-align: center;
      background: #ddd;
    }
    ul div{
      position: absolute;
      width: 300px;
      left: 0;
      top: 30px;
      height: 120px;
      background: #eee;
      text-align: left;
    }
  </style>
</head>
<body>
<script>
//代码在下面...
</script>
</body>
</html>
HTML/CSS

JS代码：

之前的练习里有个方法，就是“显示要显示的，隐藏所有不显示的”，这个观念这里可以用到。比如把先通过for遍历全部隐藏掉，再把当前点击的div显示出来。

然后……我写出来就是这样的。因为例子里面只有一个div，所以直接用div[0]写了。频繁获取了div[0]，为了让代码看起来更简洁些，将其改为 div(Parent) 函数。

  var li=document.getElementsByTagName("li");
  for(var i=0;i<li.length;i++){ //隐藏其他li并添加点击事件
    //li[i].getElementsByTagName("div")[0].style="display:none";
    div(li[i]).style="display:none";
    li[i].onclick=function(){
      for(var j=0;j<li.length;j++){ //隐藏其他li
        //li[j].getElementsByTagName("div")[0].style="display:none";
        div(li[j]).style="display:none";
      }
      //显示点击的li
      //this.getElementsByTagName("div")[0].style="display:block";
      div(this).style="display:block";
    }
  }
  //默认要显示的选项（第一个li）
  //li[0].getElementsByTagName("div")[0].style="display:block";
  div(li[0]).style="display:block";
  //Parent父级元素
  function div(Parent){
    return Parent.getElementsByTagName("div")[0];
  }
JS 方法一

还想到其他方法……

但等我先把其他几个小例子忽悠好了再来补充吧。

posted @ 2016-12-07 10:06  程序媛李李李李蕾  阅读(430)  评论(0)  编辑  收藏  举报