原生js实现导航栏点击之后添加样式

来源：互联网发布：mac系统语言代码编辑：程序博客网时间：2024/06/08 00:15

用URL地址添加active
[code=html,html 代码,true]
<style>
      #list {
         width: 150px;
         margin: 20px auto;
         }
      #list a {
         display: block;
         width: 100%;
         height: 40px;
         background: #ccc;
         margin-top: 10px;
         color: #fff;
         text-align: center;
         line-height: 40px;
         cursor: pointer;
      }
      #list li:hover {
         background-color: #FFE17B;
         }
      #list .active {
         background-color: orange;
         }
</style>
</head>
<body>
<ul id="list">
      <a href="#">Javascript</a>
      <a href="#">Gulp</a>
      <a href="#">Angular</a>
      <a href="#">Bootstrap</a>
      <a href="#">Jquery</a>
</ul>
</body>
<script>
window.onload = function() {
      var index = 0;  //定义一个变量index

      var oList = document.getElementById('list'); ///获得指定ID值的对象
      var aA = oList.getElementsByTagName('a');  //获得指定Name值的对象
      var url = window.location.href; //重新定向到新页面,同时刷新打开的页面

      // 初始化页面
      init();


      // 先写一个功能函数，从链接地址中获取 index 的值
      function getIndex(url, key) {

         if (!url) { return; }

         var arr = url.slice(url.indexOf('?') + 1).split('&');

         return function() {
            for(var item in arr) {
                  var otherArr = arr[item].split('=');
                  if (otherArr[0] == key) {
                     return otherArr[1];
                  };
            }
         }();
      }

      // 再写一个初始化函数,这个例子中比较简单，只需知道哪一个按钮是当前状态
      function init() {
         index = getIndex(url, 'index') ? getIndex(url, 'index') : 0;

         var i = 0, len = aA.length;
         for(; i<len; i++) {
            aA[i].className = '';

            // 根据不同情况处理一下url,然后给href设置上值，你也可以直接在a标签中添加链接，记得要加上index参数
            if (url.indexOf('?') > -1) {
                  if (url.indexOf('index=') > -1) {
                     url = url.replace(/index=\d*/g, 'index='+i);
                  } else {
                     url += '&index='+i;
                  }
            } else {
                  url += '?index='+i;
            }

            aA[i].setAttribute('href', url);

         }

         aA[index].className = 'active';
      }

}
</script>

0 0