html部分代码:

[html]

css部分代码:

*{
margin: ;
padding:;
list-style: none;
font-size: 12px;
}
.notice{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.notice-tit{
height: 27px;
position: relative;
background-color: #f7f7f7;
}
.notice-tit ul{
position: absolute;
width: 301px;
left: -1px;
}
.notice-tit ul li{
float: left;
width: 58px;
height: 26px;
text-align: center;
line-height: 26px;
overflow: hidden;
padding: 1px;
background: #f7f7f7;
border-bottom: 1px solid #eee; }
.notice-tit ul li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: ;
font-weight: bolder;
}
.notice li a:link,.notice-tit li a:visited{
text-decoration: none;
color: #;
}
.notice li a:hover{
color: #f90;
}
.notice-con .mod{
margin: 10px 10px 10px 19px;
}
.notice-con .mod ul li{
float: left;
width: 134px;
height: ;
overflow: hidden;
}

js部分代码:

function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload = function()
{
//获取鼠标滑过或点击的标签和要切换内容的元素
var titles = $('notice-tit').getElementsByTagName('li');
var divs =$('notice-con').getElementsByTagName('div');
// alert(divs.length);
if(titles.length!=divs.length)
return; //遍历titles下的所有li
for(var i=0;i<titles.length;i++)
{
titles[i].id = i;
titles[i].onmouseover = function(){
for(var j=0;j<titles.length;j++)
{
//清除所有li上的class
titles[j].className='';
divs[j].style.display = 'none';
}
//设置当前为高亮显示
this.className = 'select';
divs[this.id].style.display = 'block'; } }
}

  

效果演示:

Tab选项卡点击 滑动效果js实现的更多相关文章

  1. tab选项卡不同样式的效果

    一般的tab选项卡就只能两种样式,一种是选中或者是划过这个选项卡样式,一种是没选中或者没划过选项卡样式. 现在有这种需求,就是选中或划过tab选卡要不同样式.比如tab1选中或者划过是红色,tab2选 ...

  2. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  3. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  4. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  5. 转载【微信小程序】:微信小程序滚动Tab选项卡:左右可滑动切换(仿某宝)

    1.本文转载至:http://blog.csdn.net/sophie_u/article/details/71745125 2.效果: 3.最终效果如上.问题: 1).tab标题总共8个,所以一屏无 ...

  6. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  7. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  9. 原生js面向对象编程-选项卡(点击)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. WIN7自带端口转发渗透小技巧

    目标是WIN7 X64,且开启了防火墙,想要用他的机器去访问别的机器,又不想登陆他的系统,常规办法一般是上传一个htran,然后进行转发,但是对方有杀软,有被杀的可能性,所以我用另外一种办法达到我的目 ...

  2. 【转】Office 2003 EXCEL多窗口打开

    转自:http://blog.csdn.net/god_is_gril/article/details/8992587 1.注册表备份开始/运行,输入regedit回车,打开注册表.在注册表界面定位到 ...

  3. MyBatis3学习笔记(曹锋老师版)

    第2讲 这一讲主要讲解了 Mybatis 的主配置文件. 下面是一个示例的配置文件: <?xml version="1.0" encoding="UTF-8&quo ...

  4. Mac自带服务器的应用

    Mac OS下自带了apache,方便部署一些静态数据(html,css,js,xml,图片等数据) 一.系统默认路径 系统默认是隐藏apache安装目录的,但我们可以通过“命令行”或者“文件夹前往” ...

  5. Hive 窗口函数之 lead() over(partition by ) 和 lag() over(partition by )

    lead函数用于提取当前行前某行的数据 lag函数用于提取当前行后某行的数据 语法如下: lead(expression,offset,default) over(partition by ... o ...

  6. leetcode 235. 二叉搜索树的最近公共祖先(c++)

    给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x 是 p.q 的祖先且 x ...

  7. 122、TensorFlow多设备运行

    # 如果你想使你的程序运行在不同的设备上 # tf.device函数提供了一个方便的方法来实现 # 所有在特定上下文中的操作都放置在相同的设备上面 # A device specification h ...

  8. Jenkins使用五:创建部署任务

    创建部署任务 选择运行节点 选择使用shell # 如果是持续进程,这里最好加一个kill进程的命令 判断如果/root/production目录存在,就删除if [ -d /root/product ...

  9. maven 依赖调解

    项目A有两条依赖关系  A->B->C->X(1.0),A->D->X(2.0) ,X是A的传递性依赖,但是两条路径上有两个版本的依赖,会选择哪个呢? maven 依赖调 ...

  10. Vagrant 入门 - 项目设置

    原文地址 配置 Vagrant 项目的第一步是创建 Vagrantfile 文件.Vagrantfile 文件的目的有两个: 设置项目的根目录.Vagrant 中的许多配置选项是相对于这个根目录的. ...