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 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
js全选按钮的实现方法
Nov 17 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
vue中是怎样监听数组变化的
Oct 24 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
做一个有下拉功能的留言版
2006/10/09 PHP
浅析php header 跳转
2013/06/17 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
js实现从数组里随机获取元素
2015/01/12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
ECMAScript6--解构
2017/03/30 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python k-近邻算法实例分享
2014/06/11 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python温度转换华氏温度实现代码
2020/12/06 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
电子信息工程专业推荐信
2014/02/14 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python