JS+CSS实现选项卡功能
【小小一记】
首先我们写一个选项卡的结构出来,包括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实现选项卡功能的更多相关文章
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能
转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- 【转】ASP.NET MVC 4 RC的JS/CSS打包压缩功能
原文链接:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是 ...
- js原生实现选项卡功能
选项卡在js中是一个重要的知识点.他没有那么难,但在工作中却有重要的位置.几乎在每一个网站都能看到选项卡的实例.所以今天写一下选项卡的实现. 我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的 ...
- ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件
今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...
- html+css实现选项卡功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
随机推荐
- Junit初体验
JUnit是一个开源的Java单元测试框架,由 Erich Gamma 和 Kent Beck 开发完成. 主要是为了方便开发人员在自己开发的过程中能够及时的发现和解决bug用的,一方面自己可以通过单 ...
- ReactiveCocoa框架学习2
昨天内容回顾 信号类:表示有数据产生,信号类不发送数据 注意:不同的信号,订阅方式不同 RACSignal 创建RACDynamicSignal信号 -> didSubscribe(block) ...
- 撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...
- myeclipse building workspace如何禁止及提高myeclipse速度
大家一定对building workspace时那缓慢的速度给困扰到了吧~ 其实只要把project选项里的 building automatically前的勾去掉,就可以快很多了.. 另外大家一定对 ...
- 模板引擎 Velocity
模板引擎 Velocity 一.Velocity简介: Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template langu ...
- NSLayoutConstraint-代码实现自己主动布局的函数使用方法说明
[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelat ...
- 系统的启动模式(启动级别)的改动---使用upstart启动机制的
/********************************************************************* * Author : Samson * Date ...
- careercup-链表 2.6
2.6 给定一个有环链表,实现一个算法返回环路的开头结点. 类似leetcode中 Linked List Cycle II C++实现代码: #include<iostream> #in ...
- WSDL阅读方法
我们以天气预报WebService服务为例,来看看怎么阅读一个wsdl文档. 打开一个wsdl文档后,先看底部. binding在这里: portType在这里: 好了,看了上面的,我们来说说wsdl ...
- vim 编辑器笔记
vim 编辑器 命令模式(默认),尾行模式 : / 两种方式 (Esc比较慢,连续连词esc,删除全部尾行内容),编辑模式 a,i,o,s :q 退出编辑不保存 :wq 保存编辑并退出 :w 保存并写 ...