当移动到菜单“小说”，“非小说”，“少儿”时菜单背景变换，并显示相应内容：

<!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=utf-8" />

<title>tab切换</title>

<style type="text/css">

.img{

    background:url(images/menu2.gif);

    margin-left:2px;

    width:47px; height:23px;

    float:left;

    font-size:14px; text-align:center; color:#FFF

    }

ol{font-size:14px; color:#39F; line-height:20px

}

</style>

</head>

<body>

<div style="background:url(images/bg.jpg) ;width:170px; height:290px; float:left">

<div style="margin-top:50px;margin-left:10px; float:left">

         <!--导航栏头目-->

<div class="img" id="id1" onmouseover="show1()" onmouseout="out()">小说</div>

<div class="img" id="id2" onmouseover="show2()" onmouseout="out()">非小说</div>

<div class="img" id="id3" onmouseover="show3()" onmouseout="out()">少儿</div>

<div> 

                          <!--小说列目开始-->

<ol style="margin-left:-10px;margin-top:20px; float:left; display:none" id="show1" >

<li>时间旅行者的妻子</li>

<li>女心理师（下）</li>

<li>鬼吹灯之精绝古城</li>

<li>女心理师（上）</li>

<li>小时候</li>

<li>追风筝的人</li>

<li>盗墓笔记2</li>

<li>输赢</li>

</ol>

                        <!--小说列目结束-->

                      <!--非小说列目开始-->

<ol style="margin-left:-10px;margin-top:20px; float:left; display:none " id="show2">

<li>人生若只如初见</li>

<li>高效能人士的七个</li>

<li>求医不如求己</li>

<li>人体使用手册</li>

<li>孩子，把你的手给我</li>

<li>别笑！我是英文单词书</li>

<li>人体经络使用手册</li>

<li>股市稳赚</li>

</li>

</ol>

              <!--非小说列目结束-->

              <!--少儿列目开始-->

<ol style="margin-left:-10px;margin-top:20px; float:left; display:none " id="show3">

<li>斯凯瑞金色童书</li>

<li>哈利。波特</li>

<li>不一样的卡梅拉</li>

<li>他们是怎么来的</li>

<li>五。三班的坏小子</li>

<li>男生日记</li>

<li>哈利波特与魔法石</li>

<li>噼里啪啦丛书</li>

</ol>

    <!--少儿列目结束-->

</div>

</div>

</body>

<script>

            //定义小说函数方法

function show1(){

    var id1=document.getElementById("id1");

    id1.style.background="url(images/menu1.gif)"

    var show1=document.getElementById("show1");

    show1.style.display="block";

    }

    //定义非小说函数方法

function show2(){

    var id2=document.getElementById("id2");

    id2.style.background="url(images/menu1.gif)"

    var show2=document.getElementById("show2");

    show2.style.display="block";

    }

          //定义少儿函数方法

function show3(){

    var id3=document.getElementById("id3");

    id3.style.background="url(images/menu1.gif)"

    var show3=document.getElementById("show3");

    show3.style.display="block";

    }    

          //定义鼠标移动函数方法

function out(){

    var id=document.getElementById("id1");

    id.style.background="url(images/menu2.gif)"

    var show1=document.getElementById("show1");

    show1.style.display="none";

    var id2=document.getElementById("id2");

    id2.style.background="url(images/menu2.gif)"

    var show2=document.getElementById("show2");

    show2.style.display="none";    

    var id3=document.getElementById("id3");

    id3.style.background="url(images/menu2.gif)"

    var show3=document.getElementById("show3");

    show3.style.display="none";

    }

</script>

</html>

实现三联tab切换特效的更多相关文章

  1. WPF案例（－）模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

  2. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  5. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  7. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  9. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

随机推荐

  1. Problem 63

    Problem 63 https://projecteuler.net/problem=63 Powerful digit counts The 5-digit number, 16807=75, i ...

  2. 学习Android

    =========================================today start to learn Android================= 我们学习需要的软件: jd ...

  3. 3.1 一个简单的Java应用程序

        如下一个最简单的应用程序,它将只发送一条消息到控制台窗口中: package myjavapp;   public class FirstSample {       public stati ...

  4. 《hello-world》第八次团队作业：Alpha冲刺-Scrum Meeting 3

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 <hello--worl ...

  5. padding填充与box-sizing: border-box配合使用

    不管伸缩盒还是浮动盒子,只要使用到padding,就必须使用 box-sizing: border-box;     有图片的时候,需摇与其他文字对齐的时候,在图片的外层加个:vertical-ali ...

  6. vim学习1-入门指令

    使用vim命令进入vim界面 vim后面加上你要打开的已存在的文件名或者不存在(则作为新建文件)的文件名. 打开Xfce终端,输入以下命令 $ vim practice_1.txt 直接使用vim也可 ...

  7. django 和 mysql的一次troubleshooting

    下面是一次用django连接mysql的经历,记录下来也许以后会有帮助. 首先是用django的./manage.py syncdb 去连接mysql -bash-3.2$ ./manage.py s ...

  8. HPC2013小节

    对于高性能计算,三个分支能耗.高性能.容错.下面我对会议的主要内容作一个小节,很多问题也是不求甚解. 下面针对大会内容,我主要总结如下,会有了解不周的地方,欢迎讨论:大会主要报告分成3个方向,1.基础 ...

  9. Spring面试总结

    Spring面试总结 文件夹(?)[+] 1.什么是spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spr ...

  10. [LeetCode]Valid Sudoku解题记录

    这道题考查对二维数组的处理,哈希表. 1.最自然的方法就是分别看每一个数是否符合三个规则.所以就须要对应的数据结构来 记录这些信息,判定是否存在.显然最先想到用哈希表. 2.学会把问题抽象成一个个的子 ...