首页 / JAVASCRIPT / js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7702字，纯文字阅读大概需要12分钟。

内容图文

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果。分享给大家供大家参考。具体如下：

这是一款可在同一页面中多次调用的TAB选项卡代码，仿百度风云榜的TAB切换效果，用到了几张修饰图片，请顺着代码下载所需的图片，然后上传到你的网站中，修改代码内的路径就可以用了。

运行效果截图如下：

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果 - 文章图片

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿百度风云榜TAB切换</title>
<style>
body,div,h5,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
li{list-style:none;}
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrap{width:836px;border:3px solid #1972C0;border-width:3px 0;margin:10px auto;}
#list{overflow:hidden;zoom:1;margin-left:-10px;}
#wrap .item{display:inline;float:left;width:270px;padding-bottom:10px;border:1px solid #EBEBEB;margin:10px 0 10px 10px;}
#wrap .item .tab{position:relative;height:25px;border-bottom:1px solid #CCC;margin:8px;}
#wrap .item .tab h5{position:absolute;left:10px;font-size:14px;}
#wrap .item .tab .switchBtn{position:absolute;top:3px;right:0;}
#wrap .item .tab .switchBtn a{float:left;width:15px;height:15px;margin-left:5px;overflow:hidden;text-indent:-999px;background:url(images/icon_arr.gif) no-repeat;outline:none;}
#wrap .item .tab .switchBtn a.prev{background-position:0 -25px;}
#wrap .item .tab .switchBtn a.prevNot{background-position:0 0;cursor:default;}
#wrap .item .tab .switchBtn a.next{background-position:right -25px;}
#wrap .item .tab .switchBtn a.nextNot{background-position:right 0;cursor:default;}
#wrap .item .tab ul{position:absolute;top:-2px;left:50px;width:160px;height:28px;overflow:hidden;}
#wrap .item .tab ul li{float:left;cursor:pointer;line-height:26px;padding:0 8px;}
#wrap .item .tab ul li.current{cursor:text;color:#E45E2E;font-weight:700;border:1px solid #CCC;border-bottom-color:#FFF;}
#wrap .item .items{display:none;background:url(images/icon_num.gif) 15px 4px no-repeat;padding:0 15px;}
#wrap .item .items a{color:#3A64B0;}
#wrap .item .items li{height:24px;line-height:24px;padding-left:20px;border-bottom:1px solid #EBEBEB;}
#wrap .item .btn{height:22px;margin-top:10px;}
#wrap .item .btn a{float:right;width:74px;height:22px;overflow:hidden;margin-right:15px;text-indent:-9999px;background:url(images/icon_btn.gif) no-repeat;}
#wrap .item .btn a:hover{background-position:0 -22px;}
#copyright{color:#9A9A9A;text-align:center;}
#copyright a{color:#FFF;padding:2px 5px;border-radius:10px;background:#9A9A9A;}
</style>
<script>
var fgm = {
 $: function(id) {
 return typeof id === "object" ? id : document.getElementById(id);
 },
 $$: function(tagName, oParent) {
 return (oParent || document).getElementsByTagName(tagName);
 },
 $$$: function(className, element, tagName) {
 var i = 0, aClass = [], reClass = new RegExp("(^|\\s)" + className + "(\\s|$)"), aElement = fgm.$$(tagName || "*", element || document);
 for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);
 return aClass;
 },
 index: function(element) {
 var aChildren = element.parentNode.children, i;
 for(i = 0; i < aChildren.length; i++) if(aChildren[i] === element) return i;
 return -1;
 },
 on: function(element, type, handler) {
 return element.addEventListener ? element.addEventListener(type, handler, !1) : element.attachEvent("on" + type, handler); 
 },
 bind: function(object, handler) {
 return function() {
 return handler.apply(object, arguments);
 }; 
 }
};
function Tab(id) {
 var that = this;
 this.obj = fgm.$(id);
 this.oTab = fgm.$$$("tab", this.obj)[0];
 this.aTab = fgm.$$("li", this.oTab);
 this.oSwitch = fgm.$$$("switchBtn", this.oTab)[0];
 this.oPrev = fgm.$$("a", this.oSwitch)[0];
 this.oNext = fgm.$$("a", this.oSwitch)[1];
 this.aItems = fgm.$$$("items", this.obj);
 this.iNow = 0; 
 fgm.on(this.oSwitch, "click", fgm.bind(this, this.fnClick));
 fgm.on(this.oTab, "mouseover", fgm.bind(this, this.fnMouseOver));
}
Tab.prototype = {
 fnMouseOver: function(ev) {
 var oEv = ev || event,
 oTarget = oEv.target || oEv.srcElement;
 oTarget.tagName.toUpperCase() === "LI" && (this.iNow = fgm.index(oTarget));
 this.fnSwitch();
 },
 fnClick: function(ev) {
 var oEv = ev || event,
 oTarget = oEv.target || oEv.srcElement,
 i;
 switch(fgm.index(oTarget)) {
 case 0:
 if(oTarget.className == "prev") {
 this.aTab[this.iNow].style.display = "block";
 this.iNow--; 
 };
 break;
 case 1:
 if(oTarget.className == "next") { 
 for(i = 0; i < this.iNow; i++) this.aTab[i].style.display = "none";
 this.iNow++; 
 };
 break;
 };
 this.aTab[this.iNow].style.display = "block"; 
 this.fnSwitch(); 
 },
 fnSwitch: function() {
 for(var i = 0; i < this.aTab.length; i++) (this.aTab[i].className = "", this.aItems[i].style.display = "none"); 
 this.aTab[this.iNow].className = "current";
 this.aItems[this.iNow].style.display = "block";
 this.oPrev.className = this.iNow == 0 ? "prevNot" : "prev";
 this.oNext.className = this.iNow == this.aTab.length - 1 ? "nextNot" : "next";
 }
};
//应用
fgm.on(window, "load", function() {
 var aItem = fgm.$$$("item"),
 i = 0;
 for(; i < aItem.length; i++) new Tab(aItem[i]);
});
</script>
</head>
<body>
<div id="wrap">
 <div id="list">
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
  </div>
 <!--/list-->
</div>
</body>
</html>

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

内容总结

以上是互联网集市为您收集整理的js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果全部内容，希望文章能够帮你解决js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/356289.html

来源：【匿名】

【上一篇】js实现TAB切换对应不同颜色的代码【下一篇】javascript 怎么调用php方法

更多 ►

【js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果】教程文章相关的互联网学习教程文章

tab切换之tab下拉显示效果（代码示例）【图】

本篇文章给大家带来的内容是介绍tab切换之tab下拉显示效果（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <style type="text/css">*{padding: 0;margin: 0;}ul,li{list-style: none;}#warp{width: 600px;height: auto;margin: 0 auto;margin-top: 20px;}#warp .content p{width: 300px;height: 3...

在vue中实现刷新和tab切换

下面我就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。首先写个子组件用来放刷新的内容，命名为pull（可以看例子最后面放的。）然后再要刷新的页面引用<template><p class="fbjbox container"><p class="fbjbox1"><tab ref=tab :list="[推荐,热门,最新]" width="33%" @change=tabchange style="float:left"/><span class="price" width="33%" @tap="change" >价格<span class="mui-icon mui-icon...

vue实现tab切换外加样式切换方法

下面我就为大家分享一篇vue实现tab切换外加样式切换方法，具有很好的参考价值，希望对大家有所帮助。实例如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;list-style: none}#app {width: 504px;height: 300px;margin: 100px auto;border: 1px solid #000;}ul {overflow: hidden;}li {width: 100px;height: 50px;float: left;text-align: center;line...

实例详解vue仿淘宝订单状态的tab切换效果

本文主要为大家详细介绍了vue仿淘宝订单状态tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。前几天刚开始使用vue 做项目，然后自己就在项目中摸索写了一个tab切换的小dome，仿淘宝订单状态的tab切换。HTML 代码：<p class="navigation">//这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navChange的方法来把index 传递到就js中来改...

如何使用原生js实现tab切换

通过原生js实现table切换<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>选项卡</title> <style type="text/css"> .main {width:400px; margin:0 auto;} #title {height:30px; line-height:30px;} #title span {float:left; width:120px; height:30px; margin-right:5px; color:#333; background:#eee; text-align:center; cursor:pointer; font-weight:bold;} #title span.on {ba...

几种tab切换详解

本文主要分享了几种tab切换的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧1.鼠标移入移出切换<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab切换</title><style type="text/css">* {padding: 0;margin: 0;}li {list-style: none;}.wrapper {margin: 0 auto;width: 100%;max-width: 1140px;}.tabbox {margin: 40px auto;width: 400px;height: 200px;border: 1px solid #f70;overflow: hidde...

js中常用的Tab切换效果

下面小编就为大家带来一篇js中常用的Tab切换效果(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab</title><style>*{margin:0; padding:0; list-style:none;}.box{width: 1000px;overflow: hidden;margin:100px auto 0px;}#title{line-height: 40px;background-color: rgb(247,247,247...

最简单的tab切换实例代码【图】

下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧JS：$(".con").eq(0).show();$(".btn span").click(function(){var num =$(".btn span").index(this);$(".con").hide();$(".con").eq(num).show().slblings().hide();})CSS：body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; } .clear ...

jquery实现简单Tab切换菜单效果

实现tab切换的主要html代码： <p class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">导航菜单</a></li> <li><a href="#tab4">TAB标签</a></li> </ul> <p class="tab_container"> <p id="tab1" class="tab_content" style="display: block; "> <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3> <p id="">多级菜单，理论上支持无限多的层级，文件结构...

麦鸡的TAB切换功能结合了javascript和css_导航菜单【图】

这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了做个滑动门,需要一个图片 CSS 代码如下:.nav{position:relative} .nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2} .nav dt a{color:#555; text-decoration:none} .nav dt a:hover{color:#000} .nav dt a{ float:left; display:block; heig...

javascript仿126邮箱TAB切换效果_导航菜单

简洁Tab 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

div+css+js模拟tab切换效果事件绑定IE,firefox兼容_javascript技巧

div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒．111．．这里是内容撒．111．．这里是内容撒．111．．这里是内容撒222．．这里是内容撒．222．．这里是内容撒．222．．这里是内容撒．333．．这里是内容撒．333．．这里是内容撒．333．．这里是内容撒．444．．这里是内容撒．...

基于jquery的tab切换js原理_jquery【图】

html代码: 代码如下: 个人资料帐号维护在来个 11111111111111111111111111111111 22222222222222222222222222222222222 3333333333333333333333333333333333333 js代码: 代码如下: $(function(){ $(".tab>li").mouseover(function(){ $(".tab>li").removeClass("on"); $(this).addClass("on"); var target = $(# + this.rel); if (target.size() > 0) { $(.details > dl).hide(); target.show(); } else { alert(There is...

一个js的tab切换效果代码[代码分离]_javascript技巧【图】

支持自动播放可定义鼠标事件延迟不限制html结构假设HTML如下：代码如下: tab1 tab2 tab3 content1 content2 content3 执行定义的tab初始化函数代码如下: var tabType={ trigger:'触发事件', tabCurrentClass:'当前tab的className' [,delay:'事件触发的延时', auto:'是否自动播放', timer:'自动播放周期'] } // tabType的前两个是必需参数，后面的3个可根据需要添加 // 其后的tab->content对应关系以数组形式添加，以其i...

YUI的Tab切换实现代码_YUI.Ext相关

Tab切换应该不依赖于HTML结构，能给设计人员和前端开发最大的灵活性。原理：一个tab对象分为控制部分(trigger)，内容部分(sheet)。当trigger被触发时，显示对应的sheet。以前大树写过一个TabControl的代码，经过两年的使用依旧很考谱，说明当初这个思路还是比较符合实际需求的。我改成了基于YUI的版本，可能看起来更清晰一些。先访问测试页面查看效果，完整javascript代码在这里。注意：改成实际代码时，请将Tab类放在某个命名空...

首页 / JAVASCRIPT / js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

内容导读

内容图文

内容总结

内容备注

内容手机端

【js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果】教程文章相关的互联网学习教程文章

TAB - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程