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 相关文章推荐
学习JavaScript的最佳方法分享
Oct 21 Javascript
jquery foreach使用示例
Sep 12 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
Vue基础配置讲解
Nov 29 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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
简单了解OpenCV是个什么东西
2017/11/10 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python实现五子棋小程序
2019/06/18 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
房地产还款计划书
2014/01/10 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
安全检查汇报材料
2014/12/26 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
redis三种高可用方式部署的实现
2021/05/11 Redis
MySQL通过binlog恢复数据
2021/05/27 MySQL
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android