案例: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. 19-10-30-C

    交文件吼啊. ZJ一下: T1是真·高中数学. T2不是很清楚,只得了30. T3打了一个欧拉序. 做的海星的地方: Vim太好用辣,直接按平常打叫上去它就是 freopen T1仔仔细细的研究了高考 ...

  2. 菜鸟nginx源码剖析数据结构篇(十一) 共享内存ngx_shm_t[转]

    菜鸟nginx源码剖析数据结构篇(十一) 共享内存ngx_shm_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn ...

  3. Installer - 使用Maven自动布署至外部Tomcat

    一.配置相关文件 1.配置tomcat的conf/tomcat-users.xml文件 <tomcat-users> <role rolename="manager-scr ...

  4. 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表

    本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...

  5. PAT甲级——A1088 Rational Arithmetic

    For two rational numbers, your task is to implement the basic arithmetics, that is, to calculate the ...

  6. Netty 框架基本流程

    服务端 package com.mypractice.netty.server; import java.net.InetSocketAddress; import io.netty.bootstra ...

  7. python 模拟键盘输入

    备忘录 import win32api import win32con win32api.keybd_event(17,0,0,0) #ctrl键位码是17 win32api.keybd_event( ...

  8. NFS和mount常用参数详解 本文目录

    NFS和mount常用参数详解   本文目录 NFS权限参数配置 mount挂载参数 原始驱动程序的挂载选项. 新驱动程序的挂载选项. 怎样改变已经挂载的NTFS卷的权限? 怎样自动挂载一个NTFS卷 ...

  9. Node.js学习(Node.js基础)

    1.开发环境搭建 v8引擎是作为解析JavaScript程序来运行的 nodejs是一个高性能的,第一个体现在他的JavaScript解析速度很快,v8引擎性能很高,第二个事件驱动和非阻塞 2.全局对 ...

  10. 原 jeecms9自定义标签以及使用新创建的数据库表

    转载地址:https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己 ...