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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
浅谈React碰到v-if
Nov 04 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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 5.5版本的array_column()函数
2014/10/24 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
基于Python的关键字监控及告警
2017/07/06 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python中update的基本使用方法详解
2019/07/17 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python3多线程知识点总结
2019/09/26 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Python中有几个关键字
2020/06/04 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python