案例：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切换效果的更多相关文章

  1. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  2. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  3. 又一Tab切换效果（js实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  5. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  6. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  7. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

随机推荐

  1. 导入excel并进行数据提取

    /** * @description: 导入excel并进行数据提取 * @param {type} * @return: */ Vue.prototype.$importExcel = functi ...

  2. 使用subprocessm模块管理进程

    subprocess被用来替换一些老的模块和函数,如:os.system.os.spawn*.os.popen*.popen2.*.commands.*. subprocess的目的就是启动一个新的进 ...

  3. Error configuring application listener of class [org.springframework.web.util.Log4jConfigListener]

    1.启动项目发现如下错误: 严重: Error configuring application listener of class [org.springframework.web.util.Log4 ...

  4. ip地址分类和子网掩码学习笔记

    关于ip的一些学习心得 ip的概念其实很好理解,也很形象,就像一个门牌号一样,让人困惑的其实不是ip的概念本身,而是在日常计算机网络使用中,碰到很多有特殊意义的ip地址,例如,127.0.0.1,19 ...

  5. 老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分

    老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分   老师的blog整理 python基础部分: 宝哥blog: https://www.cnblogs.com/gu ...

  6. 力扣算法题—146LRU缓存机制

    [题目] 运用你所掌握的数据结构,设计和实现一个  LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 (k ...

  7. 给java mongodb 官方driver 增加bean 操作

      mongodb官方的java driver不支持直接插入java bean,只能使用DbObject的Key,Value形式进行insert,update,(c# mongodb官方driver类 ...

  8. Codeforces 500D. New Year Santa Network

    题目大意 给你一颗有\(n\)个点的树\(T\),边上有边权. 规定,\(d(i,j)\)表示点i到点j路径上的边权之和. 给你\(q\)次询问,每次询问格式为\(i, j\),表示将按输入顺序排序的 ...

  9. 嘴巴题5 「BZOJ1864」[ZJOI2006] 三色二叉树

    1864: [Zjoi2006]三色二叉树 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 1195 Solved: 882 [Submit][Status ...

  10. Luogu P2101 命运石之门的选择(分治+搜索)

    P2101 命运石之门的选择 题意 题目描述 在某一条不知名世界线的冈伦今天突然接到了一条\(dmail\),上面说世界线将会发生巨大变动,未来的他无论如何都无法扭转这种变动回到原来的世界线.而世界线 ...