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. 黑苹果 MacOS 10.15 Catalina安装教程

    10.15 Catalina 桌面 一.准备工作 一个8G以上的U盘(有的U盘标的是8G,实际只有7.X,实际容量小于7.5G的会失败) MacOS镜像.TransMac(刻录工具).DiskGeni ...

  2. 【HDOJ6638】Snowy Smile(线段树)

    题意:一个二维平面上有n个点,每个点的坐标是(x[i],y[i]),权值是w[i] 求一个矩形使得其中所有点的权值和最大,输出权值和 n<=2e3,x[i],y[i],w[i]的绝对值<= ...

  3. php面试专题---MySQL分区

    php面试专题---MySQL分区 一.总结 一句话总结: mysql的分区操作还比较简单,好处是也不用自己动手建表进行分区,和水平分表有点像 1.mysql分区简介? 一个表或索引-->N个物 ...

  4. php面试专题---11、开发环境及配置考点

    php面试专题---11.开发环境及配置考点 一.总结 一句话总结: 了解php运行原理及常见的配置项 1.版本控制软件? 集中式:CVS和SVN 分布式:Git 2.请简述CGI.FastCGI和P ...

  5. /usr/bin/ld: cannot find -lgcc_s 问题解决小记

    /usr/bin/ld: cannot find -lgcc_s 问题解决小记 博客分类: Linux/Ubuntu 由于之前用wubi装的ubuntu并且只给了它10G的硬盘空间,随着学习的深入这种 ...

  6. Linux 用户和组信息

    linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号.在使用linux操作系统时候,通常我们会遇到对多用户进行管理.比如: 用户账号的添加. ...

  7. CSS-同一行的元素高度统一

    一:flex 大法 步骤 设置外部容器 display: flex; 设置内部容器 align-items: stretch; 原理 https://developer.mozilla.org/zh- ...

  8. unittest测试框架生成可视化测试报告-BeautifulReport

    生成报告的样式: 在说unittest之前,先说几个概念: TestCase 也就是测试用例 TestSuite 多个测试用例集合在一起,就是TestSuite TestLoader是用来加载Test ...

  9. Windows系统CVE整理

    CVE-2018-8420(RCE) 受影响版本: Microsoft Windows 10 Version 1607 for 32-bit Systems Microsoft Windows 10 ...

  10. SQLServer2008查询时对象名无效

    情况一:如果表名是关键字,查询时把表名括起来,不作为关键字使用 情况二:看左上角显示的是否是master,这是数据库的默认系统库,点选这个改成自己的即可