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

案例:tab切换效果

 

获取所有的li标签

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

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

 

 

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <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切换效果)