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

<!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. C#学习笔记_13_静态类&Sealed&运算符重载&抽象类

    13_静态类&Sealed&运算符重载&抽象类 静态类 由static修饰的类就是静态类 特点: 静态类不能实例化对象 静态类中不允许写非静态的成员 静态类只能由一个父类Obj ...

  2. 第四节：numpy之数组排序

  3. 网络流入门 Drainage Ditches

    Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submission(s) ...

  4. sql server使用杂记

    SqlServer导出数据库 navcat for sql server中打开连接,打开数据库,右键--数据传输,常规选项卡--模式选择dbo,目标选择连接(选择你新建的库)或者文件(导出你要的sql ...

  5. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

  6. [React Testing] Confidently Ship Production React Apps

    We want to make sure that when we ship new code, our users can use the application. The best way we' ...

  7. hdu oj 3371 Connect the Cities （最小生成树）

    Connect the Cities Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. Linux:命令gedit

    首先,gedit是一个GNOME桌面环境下兼容UTF-8的文本编辑器.它使用GTK+编写而成,因此它十分的简单易用,有良好的语法高亮,对中文支持很好,支持包括gb2312.gbk在内的多种字符编码. ...

  9. 更改printk打印级别【转】

    本文转载自:http://blog.csdn.net/weed_hz/article/details/8949140 1.查看当前控制台的打印级别 cat /proc/sys/kernel/print ...

  10. hihocoder 1671 反转子串

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含括号和小写字母的字符串S,例如S="a(bc(de)fg)hijk". 其中括号表示将里 ...