`

CSS + TAB 滑动代码

 
阅读更多

<!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>

分享到:
评论

相关推荐

    用CSS写的Tab滑动轮

    因此,这个“用CSS写的Tab滑动轮”的项目,不仅体现了个人的爱好和对技术的自信,也对整个网页开发社区有着积极的贡献。 综上所述,这个Tab滑动轮项目,通过结合CSS和JavaScript,利用HTML的基础元素,为网页设计师...

    DIV+CSS+JavaScript实现tab切换的选项卡

    在网页设计和开发中,`DIV+CSS+JavaScript` 是一种常见的组合,用于构建动态、交互性强的用户界面。`DIV`(Division)是HTML中的一个块级元素,常用来组织页面布局;`CSS`(Cascading Style Sheets)则负责样式设计...

    Tab滑动门与导航菜单JS+CSS代码

    Tab滑动门与导航菜单JS+CSS代码,简单易用.

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    在"CSS+JS实现的圆角边框TAB选项卡滑动门代码"实例中,我们将深入探讨以下关键知识点: 1. **CSS圆角边框**:CSS3的`border-radius`属性用于设置元素边框的圆角半径,允许我们创建不同大小的圆角效果。例如,`...

    css+js滑动门小实用小实例

    在提供的压缩包文件中,"Tab"可能是示例代码或者相关的资源文件,可能包含HTML结构、CSS样式和JavaScript脚本。通过分析这些文件,你可以学习到如何将CSS和JavaScript结合起来,创建具有滑动门效果的组件。这些小...

    《精通CSS+DIV网页样式与布局》光盘源码

     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+Css的Tab菜单"是一种常见的交互式导航元素,它通过将多个页面或内容区域组织在一组选项卡下,为用户提供简洁且直观的浏览体验。Div(层)是HTML中的一个布局容器,而CSS(层叠样式表)则用于控制...

    用js+css+jsp做的Tab分页

    【标题】"用js+css+jsp做的Tab分页"涉及到的是前端开发中的一个常见功能——Tab切换分页。在网页设计中,Tab分页是一种常见的信息组织方式,它允许用户在有限的空间内展示多个相互关联的内容板块,通过点击不同的Tab...

    Tab+无缝滚动组合

    在IT行业中,网页设计与开发是一项关键技能,而"Tab+无缝滚动组合"是一个常见的交互设计元素,广泛应用于网站和应用程序中,以提供用户友好的界面。这种设计结合了tab切换功能和图片无缝滚动效果,使得多组内容可以...

    CSS+JS选项卡式导航菜单

    5. **动画效果**(可选):根据需求添加过渡动画,如淡入淡出或滑动效果。 **四、示例代码** ```html &lt;!-- HTML --&gt; &lt;div class="tab-title"&gt; &lt;button data-tab="1"&gt;选项卡1 &lt;button data-tab="2"&gt;选项卡2 &lt;!...

    CSS+JS实现的选项卡效果(html组件)

    &lt;div id="tab2" class="tab-content hidden"&gt;内容2 &lt;div id="tab3" class="tab-content hidden"&gt;内容3 ``` 接下来,CSS用于美化和布局这些元素。在这个例子中,可以使用`display:none`属性隐藏非活动的内容区域...

    家居网-网页课程设计(JS + CSS + HTMl )+ 设计报告

    例如增删留言、Tab选项卡等。 (2)使用表单和控件的常用DOM属性、方法、事件进行表单前端验证1次和其他功能1次。 (3)使用BOM调用浏览器功能1次,例如页面滚动、秒杀倒计时、打印、通知、本地存储等。 (4)使用ECharts...

    很漂亮的jquery+css Tab切换效果

    1. **jQuery基础**:在Tab切换中,我们需要用到的基本jQuery方法包括`$(document).ready()`,确保DOM加载完成后执行代码;`$('selector').click(function())`用于监听元素的点击事件;以及`$('selector').hide()`和`...

    精通CSS+DIV网页样式与布局

     8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜的应用   9.1 滤镜概述   9.2 通道(Alpha)   9.3 模糊(Blur)   9.4 运动模糊(Motion Blur)   9.5 透明色(Chroma)   9.6 下落的阴影...

    黑色经典css+js导航菜单

    3. CSS还可以实现动画效果,如渐变过渡、滑动效果等,使得导航菜单更具交互性。 【javascript】: 1. JavaScript在“黑色经典css+js导航菜单”中起到动态交互的作用,它可以监听用户的点击事件,改变菜单的状态,...

    jQuery+CSS3响应式TAB选项卡幻灯片切换代码

    本示例中的"jQuery+CSS3响应式TAB选项卡幻灯片切换代码"正是这种理念的具体应用,旨在创建一个既美观又实用的交互式界面。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax...

    javascript+css实现Tab效果

    `AveIcon.jpg`和`FlashCatcher.jpg`可能是用于Tab样式的图片资源,而`SWFDecompiler_icon.jpg`可能与解构Flash文件有关,但在这个JavaScript和CSS的Tab效果中并不直接相关。 总的来说,通过结合JavaScript的事件...

    css tab 一个自动生成纯CSS精致漂亮的菜单工具

    标签“css tab”进一步确认了这个工具是关于CSS和Tab菜单的,可能是一个用于快速生成此类菜单的软件或代码库。 在提供的压缩包文件中,`css_tab_Setup.exe`可能是安装程序,用于在用户的计算机上安装这个CSS Tab...

    不同风格的Tab滑动门代码+图片

    总结起来,“不同风格的Tab滑动门代码”涉及到了HTML结构、CSS样式、JavaScript交互、图片资源的使用、兼容性处理以及响应式设计等多个IT知识点。通过理解并实践这些概念,开发者可以创建出既有视觉吸引力又具有良好...

    基于HTML实现的Android4.0左右滑动切换Tab的UI的源代码(含html源代码+css+js+毕业设计).zip

    对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...

Global site tag (gtag.js) - Google Analytics