html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码

本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下：

一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了Js自定义函数：tabMenu，函数功能：实现tab菜单，参数说明：tabMenu(tabBox,navClass);

参数一：tabBox(tab容器id)

参数二：navClass(当前标签样式class)

备注：依赖指定html结构。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

简洁的选项卡菜单

ul,li{margin:0;padding:0;}

.tabBox{width:268px;margin:20px;}

ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}

ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;border-bottom:none;margin-right:5px;background:#fff;cursor:pointer;}

ul.tabTag li.active{border-color:#000;background:#eee;color:red;position:relative;top:1px;}

.tabCon{border:1px solid #000;border-top:none;background:#fff;}

.tCon{display:none;background:#eee;padding:25px;}

function tabMenu(tabBox,navClass){

var tabNavLi=document.getElementById(tabBox).getElementsByTagName("ul")[0].getElementsByTagName("li");

var tabCon=document.getElementById(tabBox).getElementsByTagName("div")[0].getElementsByTagName("div");

var tabLens=tabCon.length;

for(var i=0;i

//应用js闭包传入参数i作为当前索引值赋值给m

(function(m){

tabNavLi[m].onmouseover = function(){

for(var j=0; j

tabNavLi[j].className = (j==m)?navClass:"";

tabCon[j].style.display = (j==m)?"block":"";

}

})(i);

}

//函数调用

window.οnlοad=function(){

tabMenu("tabBox1","active");

tabMenu("tabBox2","active");

}

新闻1
体育1
财经1

新闻1内容

体育1内容

财经1内容

新闻2
体育2
财经2

新闻2内容

体育2内容

财经2内容

希望本文所述对大家的javascript程序设计有所帮助。

html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码相关推荐

采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果
经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域, ...
JS+CSS实现Dock menu(MacOS菜单导航效果)
看了图,你一定会想起MacOS的漂亮菜单导航效果吧,如果只看演示,你肯定会认为是Flash做的,其实不然,是通过Javascript+CSS来实现的,漂亮吧...呵呵 [效果演示] [代码下载] [使 ...
php滑动轮播效果,js实现移动端手指滑动轮播图效果
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. 如下所示: Document html{heigh ...
PHP仿百度实现弹窗登录效果,js仿百度登录页实现拖动窗口效果
在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动:那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了:首当其冲的,要涉及到鼠标 ...
js实现仿京东商品放大镜和选项卡效果
效果: 实现思路鼠标移入下面商品列表之后,在最上面显示对应的商品默认情况下,黄色盒子和右侧大盒子是隐藏的鼠标进入上面商品列表后,小黄盒子显示,右侧大盒子的商品显示右侧商品的显示,是左侧商品的两 ...
动态加载的html没有js效果,JS利用html5实现loadding动态加载效果代码实例
51前端 window.οnlοad=function(){ var Loading = function (canvas, options) { this.canvas = document.get ...
html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...

html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码

html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码相关推荐

最新文章

热门文章