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

前端技术 2023/09/01 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/2599

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案