脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现的Easy Tabs选项卡

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

 更新时间：2015年09月06日 16:51:53   作者：企鹅  
这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-Easy-Tabs-cha-menu-codes/

具体代码如下：

<!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入门初学者的二叉搜索树算法教程

    二叉搜索树则是二叉树的一种,但它只允许你在左侧节点储存比父节点小的值,右侧只允许储存比父节点大的值,这篇文章主要给大家介绍了关于JavaScript二叉搜索树算法的相关资料,需要的朋友可以参考下
    2021-09-09
  • javascript实现计算器功能

    javascript实现计算器功能

    这篇文章主要为大家详细介绍了javascript实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • easyui form validate总是返回false的原因及解决方法

    easyui form validate总是返回false的原因及解决方法

    下面小编就为大家带来一篇easyui form validate总是返回false的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 浅谈JS 数字和字符串之间相互转化的纠纷

    浅谈JS 数字和字符串之间相互转化的纠纷

    下面小编就为大家带来一篇浅谈JS 数字和字符串之间相互转化的纠纷。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Js 正则表达式知识汇总

    Js 正则表达式知识汇总

    本文对javascript中正则表达式进行了总结汇总，将知识点和注意点都理了一下，并附上2个练习题，这里分享给小伙伴
    2014-12-12
  • 详解JS中遍历语法的比较

    详解JS中遍历语法的比较

    本篇文章主要介绍了详解JS中遍历语法的比较 ，主要介绍for循环、forEach、for...in、for...of的用法和缺点，有兴趣的可以了解一下。
    2017-04-04
  • 微信小程序多项选择器checkbox

    微信小程序多项选择器checkbox

    这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js清空表单数据的两种方式(遍历+reset)

    js清空表单数据的两种方式(遍历+reset)

    这篇文章主要介绍了js清空表单数据的两种方式(遍历+reset),需要的朋友可以参考下
    2014-07-07
  • JavaScript程序开发之JS代码放置的位置

    JavaScript程序开发之JS代码放置的位置

    JavaScript在页面中使用，那么这些JS代码应该放在什么位置呢？接下来通过本文一起学习吧
    2016-01-01
  • 微信小程序实现tab切换效果

    微信小程序实现tab切换效果

    这篇文章主要为大家详细介绍了微信小程序实现tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论