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中call和apply方法浅谈
Sep 27 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
JavaScript数值类型知识汇总
Nov 17 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
Node.js 的 GC 机制详解
2019/06/03 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
2014自主招生自荐信策略
2014/01/27 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
建筑管理专业求职信
2014/07/28 职场文书
运动会主持词大全
2015/07/02 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
Python+pyaudio实现音频控制示例详解
2022/07/23 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers