JS将滑动门改为选项卡(需鼠标点击)的实现方法


Posted in Javascript onSeptember 27, 2015

本文实例讲述了JS将滑动门改为选项卡(需鼠标点击)的实现方法。分享给大家供大家参考。具体如下:

大家都知道,滑动门和选项卡在布局和结构方面几乎是一样的,唯一不同的是触发方式,这个是由JavaScript决定的,大致来讲就是将onmouseover改为onclick就行了,本款选项卡以前是款比较流行的滑动门,现在改成了选项卡,大家看看有什么区别。

运行效果截图如下:

JS将滑动门改为选项卡(需鼠标点击)的实现方法

在线演示地址如下:

具体代码如下:

<!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>
<title>滑动门改为选项卡</title>
<style>
*{
padding:0;margin:0;
font-size:12px;
}
#main{
margin:20px;
}
ul{
width:600px;
}
#tab li{
list-style:none;
float:left;
text-align:center;
padding:0;
}
#tab a{
display:block;
text-decoration:none;
width:94px;
line-height:24px;
}
#cont{
clear:both;
border:1px solid blue;
border-top:0;
width:562px!important;
width:564px;
height:190px;
overflow-y:hidden;
}
.common{
margin:5px;
}
.common li{
list-style:none;
padding-left:14px!important;
padding-left:0;
padding-top:4px;
}
.common li a{
text-decoration:none;
}
.common li a:hover{
color:red;
}
.on{
background:url(images/tabs3.gif) no-repeat left bottom;
}
.off{
background:url(images/tabs2.gif) no-repeat left bottom;
}
</style>
<script>
function $(ID){
return document.getElementById(ID)
}
function showTab(ID){
for(var i=1;i<7;i++){
if(ID==i){
$('tab'+i).blur();
$("tab"+i).className="on";
$("cont"+i).style.display="block";
}else{
$("tab"+i).className="off";
$("cont"+i).style.display="none";
}
}
return false;
}
</script>
</head>
<body>
<div id="main">
<div id="tab">
<ul>
<li><a href="javascript:void(0)" id="tab1" class="on" onclick="showTab('1')">C#源代码</a></li>
<li><a href="javascript:void(0)" id="tab2" class="off" onclick="showTab('2')">VB源代码</a></li>
<li><a href="javascript:void(0)" id="tab3" class="off" onclick="showTab('3')">VC源代码</a></li>
<li><a href="javascript:void(0)" id="tab4" class="off" onclick="showTab('4')">JQUERY脚本</a></li>
<li><a href="javascript:void(0)" id="tab5" class="off" onclick="showTab('5')">Delphi代码</a></li>
<li><a href="javascript:void(0)" id="tab6" class="off" onclick="showTab('6')">JAVA源代码</a></li>
</ul>
</div>
<div id="cont" >
<div id="cont1" class="common" style="display:block;">
<li><a href="#" target="_blank">30多个C#基础学习实例</a></li>
</div>
<div style="display:none;" id="cont2" class="common">
<li><a href="#" target="_blank">VB仿Photoshop曲线调整图像亮度源程序</a></li>
</div>
<div style="display:none;" id="cont3" class="common">
<li><a href="#" target="_blank">VC仿RealonePlayer播放器的窗体界面</a></li>
</div>
<div style="display:none;" id="cont4" class="common">
<li><a href="#" target="_blank">Farbtastic jQuery圆形网页取色插件</a></li>
</div>
<div style="display:none;" id="cont5" class="common">
<li><a href="#" target="_blank">Delphi基础学习实例代码</a></li>
</div>
<div style="display:none;" id="cont6" class="common">
<li><a href="#" target="_blank">Java图书管理程序代码</a></li>
</div>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
浅谈javascript的Touch事件
Sep 27 #Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 #Javascript
浅谈Javascript中Object与Function对象
Sep 26 #Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 #Javascript
深入分析jsonp协议原理
Sep 26 #Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 #Javascript
angularjs学习笔记之双向数据绑定
Sep 26 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
php mssql 数据库分页SQL语句
2008/12/16 PHP
php中的观察者模式
2010/03/24 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
Using the TextRange Object
2006/10/14 Javascript
JavaScript 指导方针
2007/04/05 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
pytorch 数据集图片显示方法
2018/07/26 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
数控专业应届生求职信
2013/11/27 职场文书
团组织关系介绍信
2014/01/12 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
安全责任书范文
2014/08/25 职场文书
出售房屋委托书范本
2014/09/24 职场文书