【小小一记】

首先我们写一个选项卡的结构出来,包括tab和content:

首先是tab:

<ul class="ttitle-box-tabs" id="tabs1">
<li id="tab1" class="on">
<a href="###" onmouseover="switchTab('tab1','content1');">
<span class="tfont">第一个选项卡</span>
</a>
</li>
<li id="tab2">
<a href="###" onmouseover="switchTab('tab2','content2');">
<span class="tfont">第二个选项卡</span>
</a>
</li>
<li id="tab3">
<a href="###" onmouseover="switchTab('tab3','content3');">
<span class="tfont">第三个选项卡</span></a>
</li>
</ul>

然后是content:

<div id="content1" class="current-content">
<p>This is the first content</p>
</div>
<div id="content2" class="content">
<p>This is the second content</p>
</div>
<div id="content3" class="content">
<p>This is the third content</p>
</div>

CSS:

.ttitle-box-tabs .on{background-color: #FFA500;}

.current-content{display: block;}

.content{display: none;}

.on{background-color: #FFA500;}

JS:

<script type="text/javascript">
function switchTab(ProTag,ProBox){
for(i=1;i<4;i++){
if("tab"+i==ProTag){
document.getElementById(ProTag).className="on";
}
else{
document.getElementById("tab"+i).className="";
}
if("content"+i==ProBox){
document.getElementById(ProBox).style["display"]="block";
}
else{
document.getElementById("content"+i).style["display"]="none";
}
}
}

这样就实现了一个选项卡。

JS+CSS实现选项卡功能的更多相关文章

  1. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  2. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  3. (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...

  4. ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  5. 【转】ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    原文链接:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是 ...

  6. js原生实现选项卡功能

    选项卡在js中是一个重要的知识点.他没有那么难,但在工作中却有重要的位置.几乎在每一个网站都能看到选项卡的实例.所以今天写一下选项卡的实现. 我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的 ...

  7. ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...

  8. html+css实现选项卡功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

随机推荐

  1. Idea实现WebService实例 转

    作者:http://blog.csdn.net/dreamfly88/article/details/52350370 因为工作需要,数据传输部分需要使用webservice实现,经过两天的研究,实现 ...

  2. Spring Aop重要概念介绍及应用实例结合分析

    转自:http://bbs.csdn.net/topics/390811099 此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细 ...

  3. Ubuntu vim+ ctags(包含系统函数) + taglist 配置 分类: vim ubuntu 2015-06-09 18:19 195人阅读 评论(0) 收藏

    阅读大型代码,我们经常需要打开很多的代码文件,搜索各种定义.windows下用惯了ide的朋友,转战Linux的时候可能会觉得很难受,找不到合适的阅读工具.其实万能的vim就可以实现.下面介绍一下vi ...

  4. [D3] 13. Cleaner D3 code with selection.call()

    selection.call() method in D3 can aid in code organization and flexibility by eliminating the need t ...

  5. LeetCode刷题笔录Add Binary

    Given two binary strings, return their sum (also a binary string). For example, a = "11" b ...

  6. mysql触发器的作用及语法

    触发器是一种特殊的存储过程,它在插入,删除或改动特定表中的数据时触发运行,它比数据库本身标准的功能有更精细和更复杂的数据控制能力. 数据库触发器有下面的作用: 1.安全性.能够基于数据库的值使用户具有 ...

  7. JSP中嵌入java代码的标签方式(转)

    (1)声明变量或方法 :  <%! 声明; %> :慎重使用,因为此方法定义的是全局变量 (2)java片段(scriptlet):  <% java代码; %> (3)表达式 ...

  8. CocoaPods导入第三方库头文件自动补齐

    使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...

  9. 对于Maven管理的项目制定虚拟目录

    基于Maven管理的web项目结构: target目录是用来存放项目打包之后生成的文件的目录,此目录中的文件必须调用mvn clean package后才能生成, 如果把虚拟目录设置在此目录中,则每次 ...

  10. Java基础知识强化之集合框架笔记63:Map集合之HashMap嵌套ArrayList

    1. ArrayList集合嵌套HashMap集合并遍历. 需求:假设ArrayList集合的元素是HashMap.有3个.每一个HashMap集合的键和值都是字符串.元素我已经完成,请遍历. 结果: ...