js+css实例超漂亮tab切换选项卡代码
2024-04-03 05:30:03
效果图：
代码：切换效果，要点击才能实现。
js+css实例超漂亮tab切换选项卡代码
<!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>
<title>SAMSUNG 三星 943NW+PLUS 19英寸 宽屏液晶显示器 黑色 - 新蛋中国</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="http://c1.neweggimages.com.cn/WebResources/2009/Default/Css/frame091107.css" />
</head>
<body>
<div id="wrap">
<div id="body">
<div id="main" style="overflow:hidden;">
<div id="tabCot_product" class="tab">
<div class="tabContainer"><label class="backTop"><a href="#" title="回到顶部">回到顶部</a></label><ul class="tabHead" id="tabCot_product-li-currentBtn-"><li class="currentBtn"><a href="javascript:void(0)" title="产品描述" rel="1">产品描述</a></li><li><a href="javascript:void(0)" title="规格参数" rel="2">规格参数</a></li><li><a href="javascript:void(0)" title="包装信息" rel="3">包装信息</a></li><li><a href="javascript:void(0)" title="保修条款" rel="4">保修条款</a></li></ul>
</div>
<div id="tabCot_product_1" class="tabCot">
<table style="border-style:none;"><tr><td style="border-style:none; padding:0px;"><p><u><b>产品概述</b></u></p><p>产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br /></p></td></tr>
</table>
<div class="clear"></div>
</div>
<div id="tabCot_product_2" class="tabCot" style="display: none;"><div>规格参数：<br />声明：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，新蛋不能确保客户收到的货物与网站的图片、产地、附件说明完全一致。只能确保为原厂正品行货！并且保证与当时市场上同样主流新品一致。若网站没有及时更新，请大家谅解！</div><div class="clear"></div>
</div>
<div id="tabCot_product_3" class="tabCot" style="display: none;"><div>声明：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，新蛋不能确保客户收到的货物与网站的图片、产地、附件说明完全一致。只能确保为原厂正品行货！并且保证与当时市场上同样主流新品一致。若网站没有及时更新，请大家谅解！</div><div class="clear"></div>
</div>
<div id="tabCot_product_4" class="tabCot" style="display: none;"><div>保修条款：<br />声明：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，新蛋不能确保客户收到的货物与网站的图片、产地、附件说明完全一致。只能确保为原厂正品行货！并且保证与当时市场上同样主流新品一致。若网站没有及时更新，请大家谅解！</div><div class="clear"></div>
</div>
<div class="modBottom"><span class="modABL"></span><span class="modABR"></span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="noprint">
<script type="text/javascript" language="jscript">
function tab(o, s, cb, ev){//tab切换类var $ = function(o){return document.getElementById(o)};var css = o.split((s||'_'));if(css.length!=4)return;this.event = ev || 'onclick';o = $(o);if(o){this.ITEM = [];o.id = css[0];var item = o.getElementsByTagName(css[1]);var j=1;for(var i=0;i<item.length;i++){if(item[i].className.indexOf(css[2])>=0 || item[i].className.indexOf(css[3])>=0){if(item[i].className == css[2])o['cur'] = item[i];item[i].callBack = cb||function(){};item[i]['css'] = css;item[i]['link'] = o;this.ITEM[j] = item[i];item[i]['Index'] = j++;item[i][this.event] = this.ACTIVE;}}return o;}
}
tab.prototype = {ACTIVE:function(){var $ = function(o){return document.getElementById(o)};this['link']['cur'].className = this['css'][3];this.className = this['css'][2];try{$(this['link']['id']+'_'+this['link']['cur']['Index']).style.display = 'none';$(this['link']['id']+'_'+this['Index']).style.display = 'block';}catch(e){}this.callBack.call(this);this['link']['cur'] = this;}
}
/*tab 使用方法:new tab(标签ID, id分隔符, 单击事触发函数, 什么事件触发TAB切换);标签ID: ID命名格式为: 前缀+分隔符+TAB标签的HTML标签名+激活状态下标签样式+分隔符+非激活状态下标签样式(必须)id分隔符: 分隔符(必须)TAB切换时触发函数: TAB切换时触发函数(可选)什么事件触发TAB切换:可选(默认为onclick)注: 标签ID命名时的前缀将做为 该标签的新ID值,所以前缀不要与现在任何元素的ID值相同.返回值为: 标签ID所对象的对象.切换标签时对应的 项目名称命名规则:前缀+_+顺序值具体理解,可以看上面的代码,比如ID为 "test3_li_now_" 的对象代表的意思是:前缀为 test3li 为 id为 "test3_li_now_" 标签下面的 li 标签 做为TAB项.now 为 标签激活时的样式"" 最后的空为 非激活状态下的样式每个标签项 激活 状态下对应的元素的ID应该命名为:test3_1 第一个标签项对应项目test3_2 第二个标签项对应项目test3_3 第三个标签项对应项目等等
*/
new tab('tabCot_product-li-currentBtn-', '-');
</script>
</div>
</body>
</html>转载于:https://www.cnblogs.com/wangblognet/archive/2013/01/26/2877536.html
js+css实例超漂亮tab切换选项卡代码相关推荐
- html5导航 按钮,CSS实例:超酷的网站导航按钮
CSS实例:超酷的网站导航按钮 互联网 发布时间:2009-04-02 19:35:20 作者:佚名 我要评论 网页制作Webjx文章简介:本文一步一步手把手教你打造一个极酷的三层分离的标 ...
- 巧妙的有css合并图片解决tab切换的背景图片
巧妙的有css合并图片解决tab切换的背景图片 有时候做tab切换的时候 会碰到下面的这种情况 我截个图过来看看 tab切换 打开页面时候 茶庄介绍 及鼠标移上去时候 是上面这样的效果 当鼠标移下 ...
- JS控制下的双层Tab切换
如题,JS控制下的双层Tab切换,其实只要想通了原理,实现起来很简单! <style type="text/css"> img{border:none;padding: ...
- 一款JS+CSS实现的无缝平滑图片滚动代码
代码简介: 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 代码内容 ...
- Js+Css打造的红色经典伸缩菜单代码
代码简介: JS+Css伸缩菜单,红色,很好看.注:IE6下好像有点不正常,用的朋友自己修正下! 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- CSS 实例系列 - 01 - Tab 滑动门
Hello 小伙伴们早上.中午.下午.晚上和深夜好,这里是 jsliang~ 本 CSS 系列文章: 主推学以致用.结合面试题和工作实例,让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 C ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
- html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
- JS底层书写的简单Tab切换！
Tab切换 1.题目 参照某宝网一个商品详情页,写出tab切换的功能,样式不限,实现功能即可(对dom元素操作) 2.写法与思路 (1).对给到的要求我们首先去某宝网看一下效果图,可以清晰的发现,大的 ...
最新文章
- ADO.NET学习笔记-非链接类
- 用代码证明自己闲的蛋疼（三）——回溯法做数独
- jQuery事件对象event的属性和方法
- 7 orm 有批量更新_2020.12.24更新公告
- idea debug启动不了 模式下 报错 ‘Connected to the target VM,address:‘127.0.0.1:58337‘,transport:‘socket‘’
- [转]WTL的windows mobile环境的配置(vs2008)[最终版，验证通过]
- UBUNTU安装 SSH 服务
- Java之JMX 详解
- 毕业设计/酒店管理系统
- 根据经纬度计算两地之间的距离
- 网狐cocos2d-lua棋牌二次开发搭建教程
- 如何提取NC中的数据不同维度信息（如：变量、时间等
- indexOf()用法
- 百度排名批量查询_一篇文章告诉你如何快速实现百度霸屏？
- 深度学习中的多任务学习介绍
- 一款App的开发成本是多少?
- 程序员七夕特刊，绝无狗粮添加
- learning ddr Electrical Characteristics and AC Timing
- 维基百科:人人都能改写的网络百科全书
- 软件工程2019：第2次作业—— 时事点评