js实现的Easy Tabs选项卡用法实例


Posted in Javascript onSeptember 06, 2015

本文实例讲述了js实现的Easy Tabs选项卡用法。分享给大家供大家参考。具体如下:

本网页选项卡是Easy Tabs选项卡插件中的一个演示实例代码,是一个最简单的选项卡样式,稍带点动画色彩,希望大家喜欢哦。

运行效果截图如下:

js实现的Easy Tabs选项卡用法实例

在线演示地址如下:

具体代码如下:

<!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>Tabs选项卡</title>
<style type="text/css">
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}
</style>
<script type="text/javascript">
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script>
<script type="text/javascript">
/*Function for our Tabmenu with 4 Tabs*/
function swichtabs(wert) {
 if (wert=='1'){
  document.getElementById('tablink1').className='tab1 tabactive';
  document.getElementById('tablink2').className='tab2';
  document.getElementById('tablink3').className='tab3';
  document.getElementById('tablink4').className='tab4';
 }else if (wert=='2'){
  document.getElementById('tablink1').className='tab1';
  document.getElementById('tablink2').className='tab2 tabactive';
  document.getElementById('tablink3').className='tab3';
  document.getElementById('tablink4').className='tab4';
 }else if (wert=='3'){
  document.getElementById('tablink1').className='tab1';
  document.getElementById('tablink2').className='tab2';
  document.getElementById('tablink3').className='tab3 tabactive';
  document.getElementById('tablink4').className='tab4';
 } else if (wert=='4'){
  document.getElementById('tablink1').className='tab1';
  document.getElementById('tablink2').className='tab2';
  document.getElementById('tablink3').className='tab3';
  document.getElementById('tablink4').className='tab4 tabactive';
 }
}
</script>
</head>
<body>
<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('1');" onclick="return false;" title="" class="tabactive" id="tablink1">Tab 1 </a>
</li>
<li><a href="#" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4');swichtabs('3');" onclick="return false;" title=""id="tablink3">Tab 3 </a>
</li>
<li><a href="#" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2');blendoff('tabcontent3');swichtabs('4');" onclick="return false;" title=""id="tablink4" >Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu -->
<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
Tabcontent 1
</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
Tabcontent 2
</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div style="display:none;" id="tabcontent3">
Tabcontent 3
</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
Tabcontent 4
</div>
<!--End Tabcontent 4-->
</body>
</html>

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

Javascript 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
fetch 使用及如何接收JS传值
Nov 11 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 #Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 #Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 #Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 #Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 #Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 #Javascript
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python批量图片处理简单示例
2019/08/06 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
新电JAVA笔试题目
2014/08/31 面试题
高级销售员求职信
2013/10/25 职场文书
捐书寄语赠言
2014/01/18 职场文书
先进集体事迹材料
2014/02/17 职场文书
微笑服务演讲稿
2014/05/13 职场文书
八项规定对照检查材料
2014/08/31 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers