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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
浅谈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
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
js常见遍历操作小结
2019/06/06 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
python图片验证码生成代码
2016/07/02 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
上班玩手机检讨书
2014/02/17 职场文书
销售目标责任书
2014/07/23 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL