- 浏览: 503285 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (191)
- Android学习 (3)
- jsp/servlet (2)
- java学习 (44)
- 数据库 (28)
- GWT开发学习 (8)
- 开发中问题 (15)
- JavaScript (48)
- 正则表达式 (1)
- svn配置 (1)
- C# (5)
- SSH (8)
- 找工作面试用 (5)
- DWR开发学习 (0)
- CSS学习 (4)
- AJAX学习 (1)
- Swing (1)
- Json (3)
- Jquery (4)
- Java 网络编程 (1)
- 管理相关 (2)
- Weblogic (1)
- 开发模式 (1)
- web前端 (6)
- 响应式设计 (1)
- Angular (5)
- 其它 (1)
- LESS (1)
- AngularJS (1)
- 负载并发、性能 (4)
- 数据结构与算法 (1)
最新评论
-
世界尽头没有你:
Java并发编程与高并发解决方案网盘地址:https://pa ...
java处理高并发高负载类网站的优化方法 -
叮咚可乐名:
Java并发编程与高并发解决方案网盘地址:https://pa ...
java处理高并发高负载类网站的优化方法 -
叮咚可乐名:
Java并发编程和高并发解决方案视频课程网盘地址:https: ...
java处理高并发高负载类网站的优化方法 -
putonyuer:
如果不是转载 , 要点总结的非常好 , 牛逼。
生产者消费者模式浅析 -
daxun1983:
爱得发疯
java判断是否为汉字和是否有汉字的方法
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动门</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs1.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.normaltab { background-image:url('http://www.codefans.net/jscss/demoimg/200901/tabs2.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs3.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
ASP.NET</li>
<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
MYSQL</li>
<li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
DELPHI</li>
<li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
VB.NET</li>
<li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
JAVA</li>
<li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
PHP5</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>
<div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>
<div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>
<div class="undis" id="tbc_04">这里是VB.NET的相关内容</div>
<div class="undis" id="tbc_05">这里是JAVA的相关内容</div>
<div class="undis" id="tbc_06">这里是PHP5的相关内容</b>
</div>
</div>
</div>
</body>
</html>
发表评论
-
jquery 选择器,模糊匹配
2015-04-18 14:58 1942按姓名匹配 1,name前缀为aa的所有div的jquery ... -
window.addEventListener来解决让一个js事件执行多个函数
2015-01-12 15:57 1319可能你也碰到过这种情况,就是在js的代码中用了window. ... -
javascript中ie8/ie9不支持Array.indexOf解决办法
2015-01-12 15:26 1366场景:js中判断一个string是否在一个js的数组中。方法 ... -
实时Javascript开发框架Clouda、Meteor、Firebase对比
2014-05-21 10:57 1159什么是实时Javascript开发框架? 自从2009年N ... -
select边框颜色修改兼容样式
2013-10-28 10:55 5396<!DOCTYPE html PUBLIC " ... -
任意美化你的文件域 <input type="file" /> 兼容各浏览器
2013-08-31 16:23 3668样式: .fileInput{width:10 ... -
JS判断页面是否出现滚动条
2013-08-23 23:04 1446当可视区域小于页面的实际高度时,判定为出现滚动条,即: ... -
JavaScript 图片切割效果
2013-04-01 10:13 1015序一(08/07/21) 很久之 ... -
显示输入剩余字数
2013-02-21 15:25 1027<!DOCTYPE html PUBLIC " ... -
div固定悬浮(左侧、右侧、任意相对位置)
2013-01-08 15:14 28018<!DOCTYPE html PUBLIC " ... -
用js显示google地图总结
2012-11-26 15:37 2827功能较全的一个,可 ... -
js 计算浏览器宽度和高度
2012-11-23 11:42 3001<!DOCTYPE html PUBLIC &qu ... -
怎么样让弹出的DIV显示在网页的中间?
2012-09-05 18:30 1160怎么样让弹出的DIV显示在网页的中间? ... -
DIV固定在屏幕的中间/两侧,不随滚动条移动而改变位置
2012-09-04 18:00 7614<!DOCTYPE html PUBLIC " ... -
图片大小 图片尺寸 计算
2012-08-28 15:05 1170<!DOCTYPE HTML PUBLIC " ... -
enctype="multipart/form-data"中Form参数的获取
2012-08-22 17:40 3081enctype="multipar ... -
js动态增加删除 Table 行
2012-08-07 10:59 1402<html> <head> ... -
JS动态控制鼠标位置,DIV由隐藏显示时控制画面控制
2012-06-29 16:24 6957<!DOCTYPE html PUBLIC " ... -
CSS代替bordercolorlight与bordercolordark
2012-06-11 15:51 2868CSS代替bordercolorlight与bordercol ... -
Javscript Json数据操作(数据增,删,改,查)
2012-06-02 23:30 8159<!DOCTYPE html PUBLIC " ...
相关推荐
因此,这个“用CSS写的Tab滑动轮”的项目,不仅体现了个人的爱好和对技术的自信,也对整个网页开发社区有着积极的贡献。 综上所述,这个Tab滑动轮项目,通过结合CSS和JavaScript,利用HTML的基础元素,为网页设计师...
在网页设计和开发中,`DIV+CSS+JavaScript` 是一种常见的组合,用于构建动态、交互性强的用户界面。`DIV`(Division)是HTML中的一个块级元素,常用来组织页面布局;`CSS`(Cascading Style Sheets)则负责样式设计...
Tab滑动门与导航菜单JS+CSS代码,简单易用.
在"CSS+JS实现的圆角边框TAB选项卡滑动门代码"实例中,我们将深入探讨以下关键知识点: 1. **CSS圆角边框**:CSS3的`border-radius`属性用于设置元素边框的圆角半径,允许我们创建不同大小的圆角效果。例如,`...
在提供的压缩包文件中,"Tab"可能是示例代码或者相关的资源文件,可能包含HTML结构、CSS样式和JavaScript脚本。通过分析这些文件,你可以学习到如何将CSS和JavaScript结合起来,创建具有滑动门效果的组件。这些小...
8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜的应用 9.1 滤镜概述 9.2 通道(Alpha) 9.3 模糊(Blur) 9.4 运动模糊(Motion Blur) 9.5 透明色(Chroma) 9.6 下落的阴影...
在网页设计中,"Div+Css的Tab菜单"是一种常见的交互式导航元素,它通过将多个页面或内容区域组织在一组选项卡下,为用户提供简洁且直观的浏览体验。Div(层)是HTML中的一个布局容器,而CSS(层叠样式表)则用于控制...
【标题】"用js+css+jsp做的Tab分页"涉及到的是前端开发中的一个常见功能——Tab切换分页。在网页设计中,Tab分页是一种常见的信息组织方式,它允许用户在有限的空间内展示多个相互关联的内容板块,通过点击不同的Tab...
在IT行业中,网页设计与开发是一项关键技能,而"Tab+无缝滚动组合"是一个常见的交互设计元素,广泛应用于网站和应用程序中,以提供用户友好的界面。这种设计结合了tab切换功能和图片无缝滚动效果,使得多组内容可以...
5. **动画效果**(可选):根据需求添加过渡动画,如淡入淡出或滑动效果。 **四、示例代码** ```html <!-- HTML --> <div class="tab-title"> <button data-tab="1">选项卡1 <button data-tab="2">选项卡2 <!...
<div id="tab2" class="tab-content hidden">内容2 <div id="tab3" class="tab-content hidden">内容3 ``` 接下来,CSS用于美化和布局这些元素。在这个例子中,可以使用`display:none`属性隐藏非活动的内容区域...
例如增删留言、Tab选项卡等。 (2)使用表单和控件的常用DOM属性、方法、事件进行表单前端验证1次和其他功能1次。 (3)使用BOM调用浏览器功能1次,例如页面滚动、秒杀倒计时、打印、通知、本地存储等。 (4)使用ECharts...
1. **jQuery基础**:在Tab切换中,我们需要用到的基本jQuery方法包括`$(document).ready()`,确保DOM加载完成后执行代码;`$('selector').click(function())`用于监听元素的点击事件;以及`$('selector').hide()`和`...
8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜的应用 9.1 滤镜概述 9.2 通道(Alpha) 9.3 模糊(Blur) 9.4 运动模糊(Motion Blur) 9.5 透明色(Chroma) 9.6 下落的阴影...
3. CSS还可以实现动画效果,如渐变过渡、滑动效果等,使得导航菜单更具交互性。 【javascript】: 1. JavaScript在“黑色经典css+js导航菜单”中起到动态交互的作用,它可以监听用户的点击事件,改变菜单的状态,...
本示例中的"jQuery+CSS3响应式TAB选项卡幻灯片切换代码"正是这种理念的具体应用,旨在创建一个既美观又实用的交互式界面。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax...
`AveIcon.jpg`和`FlashCatcher.jpg`可能是用于Tab样式的图片资源,而`SWFDecompiler_icon.jpg`可能与解构Flash文件有关,但在这个JavaScript和CSS的Tab效果中并不直接相关。 总的来说,通过结合JavaScript的事件...
标签“css tab”进一步确认了这个工具是关于CSS和Tab菜单的,可能是一个用于快速生成此类菜单的软件或代码库。 在提供的压缩包文件中,`css_tab_Setup.exe`可能是安装程序,用于在用户的计算机上安装这个CSS Tab...
总结起来,“不同风格的Tab滑动门代码”涉及到了HTML结构、CSS样式、JavaScript交互、图片资源的使用、兼容性处理以及响应式设计等多个IT知识点。通过理解并实践这些概念,开发者可以创建出既有视觉吸引力又具有良好...
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...