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

案例:tab切換效果

 

獲取全部的li標籤javascript

第一件事:把這個a所在的因此兄弟元素的類樣式所有移除 (removeAttributes)html

第二件事:當前點擊的a父級元素li (點擊這個a所在的所在元素li),設置背景顏色 (this.parentNode.className)java

 

 

<!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>
相關文章
相關標籤/搜索