脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS黑色风格的网页TAB选项卡

JS实现黑色风格的网页TAB选项卡效果代码

 更新时间：2015年10月09日 11:10:40   作者：企鹅  
这篇文章主要介绍了JS实现黑色风格的网页TAB选项卡效果代码,通过简单的页面元素遍历控制页面tab切换效果,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款网页TAB选项卡JS代码，黑色超酷的风格，看了后你会喜欢的，很熟悉很经典的风格，似曾相识的感觉，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/

具体代码如下：

<!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>Tab切换</title>
<script type="text/jscript">
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 var con=document.getElementById("con_"+name+"_"+i);
 menu.className=i==cursel?"hover":"";
 con.style.display=i==cursel?"block":"none";
 }
}
</script>
<style type="text/css">
*{
 margin:0px;
 padding:0px;
 list-style:none;
}
.main{
 width:306px;
 height:299px;
 float:left;
 margin:300px;
 display:inline;
 background:#000;
 padding:3px;
}
.main .menu{
 width:306px;
 height:31px;
 overflow:hidden;
 float:left;
}
.main .menu span{
 width:60px;
 height:30px;
 line-height:30px;
 overflow:hidden;
 text-align:center;
 float:left;
 margin:1px 0 0 1px;
 background:#333;
 color:#BCBCBC;
 font-weight:bold;
 cursor:pointer;
 font-size:12px;
}
.main .menu .hover{
 background:#666;
 color:#FFF;
}
.main .content{
 width:304px;
 height:266px;
 overflow:hidden;
 float:left;
 margin:1px;
 margin-top:0px;
 display:inline;
 background:#333333;
}
.main .content div{
 width:304px;
 height:266px;
 line-height:266px;
 text-align:center;
 color:#FFFFFF;
 font-weight:bold;
 background:#666;
}
</style>
</head>
<body>
<div class="main">
 <div class="menu">
  <span id="one1" onclick="setTab('one',1,5)" class="hover">菜单一</span>
  <span id="one2" onclick="setTab('one',2,5)">菜单二</span>
  <span id="one3" onclick="setTab('one',3,5)">菜单三</span>
  <span id="one4" onclick="setTab('one',4,5)">菜单四</span>
  <span id="one5" onclick="setTab('one',5,5)">菜单五</span>
 </div>
 <div class="content">
  <div id="con_one_1">内容一</div>
  <div id="con_one_2" style="display:none">内容二</div>
  <div id="con_one_3" style="display:none">内容三</div>
  <div id="con_one_4" style="display:none">内容四</div>
  <div id="con_one_5" style="display:none">内容五</div>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Node版本升级和降级完整步骤

    Node版本升级和降级完整步骤

    这篇文章主要给大家介绍了关于使用Node版本升级和降级的相关资料,在开发的工程中我们可能需要经常切换node版本来应对不同的开发环境,所以需要经常使用不同版本的node,需要的朋友可以参考下
    2023-09-09
  • Google 静态地图API实现代码

    Google 静态地图API实现代码

    Google 静态地图 文档说的很详细，这里就不在啰嗦了！
    2010-11-11
  • 点选TOP后并不是直接跳到页顶的，而是滚动上去

    点选TOP后并不是直接跳到页顶的，而是滚动上去

    滚动至页顶，比以前的直接跳到页顶效果好很多，正的很不错
    2008-09-09
  • javascript工厂模式和构造函数模式创建对象方法解析

    javascript工厂模式和构造函数模式创建对象方法解析

    本文主要对javascript工厂模式和构造函数模式创建对象方法进行解析，具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • javascript实现文字无缝滚动

    javascript实现文字无缝滚动

    这篇文章主要介绍了javascript实现文字无缝滚动，文字可以实现上下滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript中闭包的4个有用技巧分享

    JavaScript中闭包的4个有用技巧分享

    当谈到JavaScript编程中的高级概念和技巧时,闭包（Closures）是一个重要而有趣的主题,闭包是一种函数与其创建时的词法环境的组合,它允许我们捕获和保留局部变量,并在函数之外使用它们,在这篇文章中,我们将深入探讨JavaScript中闭包的4种有用技巧
    2023-10-10
  • js显示文本框提示文字的方法

    js显示文本框提示文字的方法

    这篇文章主要介绍了js显示文本框提示文字的方法,涉及javascript鼠标事件及样式操作的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • JS实现简单的天数计算器完整实例

    JS实现简单的天数计算器完整实例

    这篇文章主要介绍了JS实现简单的天数计算器,结合完整实例形式分析了javascript针对日期的获取及天数运算相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 探索Javascript中this的奥秘

    探索Javascript中this的奥秘

    本文介绍了JavaScript中的this关键字在各种情况下的含义，实例都很简单，这样更能有助于加深理解。虽然这只是js中一个很小的概念，但借此我们可以了解js中函数的执行环境，充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。
    2016-12-12
  • JavaScript学习笔记--常用的互动方法

    JavaScript学习笔记--常用的互动方法

    本文对JavaScript中常用的互动方法进行实例分析介绍，图文并茂，有需要的朋友可以看下
    2016-12-12

最新评论