JS---案例：tab切换效果

案例：tab切换效果

获取所有的li标签

第一件事：把这个a所在的所以兄弟元素的类样式全部移除 (removeAttributes)

第二件事：当前点击的a父级元素li (点击这个a所在的所在元素li)，设置背景颜色 (this.parentNode.className)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #list li {
      list-style-type: none;
      width: 80px;
      height: 30px;
      line-height: 30px;
      background-color: beige;
      text-align: center;
      float: left;
      margin-left: 5px;
    }

    #list li.current {
      background-color: burlywood;
    }

    #list li a {
      text-decoration: none;
    }
  </style>

</head>

<body>
  <div id="menu">
    <ul id="list">
      <li class="current"><a href="http://www.baidu.com">首页</a>
      </li>
      <li><a href="javascript:void(0)">播客</a></li>
      <li><a href="javascript:void(0)">博客</a></li>
      <li><a href="javascript:void(0)">相册</a></li>
      <li><a href="javascript:void(0)">关于</a></li>
      <li><a href="javascript:void(0)">帮助</a></li>
    </ul>
  </div>
  <script src="common.js"></script>
  <script>
    //获取所有的li标签
    var liObjs = my$("list").getElementsByTagName("li");
    //循环遍历，找到每个li中的a，注册点击事件
    for (var i = 0; i < liObjs.length; i++) {
      //每个li中的a
      var aObj = getFirstElement(liObjs[i]);

      aObj.onclick = function () {
        //第一件事：把这个a所在的所以兄弟元素的类样式全部移除
        for (var j = 0; j < liObjs.length; j++) {
          liObjs[j].removeAttribute("class");
        }
        //第二件事：当前点击的a父级元素li (点击这个a所在的所在元素li)，设置背景颜色
        this.parentNode.className = "current";
        return false;//阻止超链接跳转
      };
    }

  </script>

</body>

</html>

JS---案例：tab切换效果

案例：tab切换效果

猜你喜欢