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

<!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. 6.3.3 使用 shelve 模块操作二进制文件

    Python标准库shelve也提供了二进制文件操作的功能,可以像字典赋值一样来写入二进制文件,也可以像字典一样读取二进制文件,有点类似于NoSQL数据库MongoDB. import shelve ...

  2. Django——2 路由分配设置 re_path正则匹配 include总路由 url传参 name使用 模板渲染render方法 模板渲染方法

    Django 路由分配设置 re_path正则匹配 include总路由设置 url额外参数的传递 name的使用 模板的渲染:render方法   路由的分配中, 可以设定相应的转换器加以约束,比如 ...

  3. Leetcode 49.字母异位词分组

    字母异位词分组 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", " ...

  4. [Cogs728] [网络流24题#3] 最小路径覆盖 [网络流，最大流，二分图匹配]

    建图:源点—>边的起点(集合1中的)—>边的终点(集合2中的)—>汇点,所有边权均为1, 计算最大流,最后枚举起点的出边,边权为0的即为匹配上的, 可以这样理解:每条边表示起点和终点 ...

  5. C++ premier 中文版 学习笔记（第五章 表达式）

    解应用和自增组合使用的理解 由于后自增操作的优先级高于解引用操作,因此 *iter++ 等效于*(iter++).子表达式 iter++ 使 iter 加 1,然后返回 iter 原值的副本作为该表达 ...

  6. Windows安装php Oracle扩展

    前言 去IOE的浪潮下,很多大型公司古董级的系统还在使用IOE设备.新东家有些年头的系统都是使用Oracle数据库,为了省事,新架构下的业务直接通过编程语言API操作Oracle数据库,安装相关扩展对 ...

  7. web项目log日志查看分析->流程理解

    1.DEBUG [2017-07-10 11:38:41,705][] org.springframework.web.servlet.DispatcherServlet:865 - Dispatch ...

  8. PHP array_intersect_ukey()

    定义和用法 array_intersect_ukey() 函数用回调函数比较键名来计算数组的交集. array_intersect_ukey() 返回一个数组,该数组包含了所有出现在 array1 中 ...

  9. Delphi春天将来临，Android遇到XE7我也是醉了，Hello World

    回首往日,从Delphi 7走到如今.总感觉不愠不火.期间论坛倒掉无数,没倒掉的也半死不活,大批的程序猿转向C#,Java,PHP. Delphi的开发高效有目共睹,一直不忍放弃.Delphi以前一夜 ...

  10. @RestController注解的使用

    示例代码:/*@ResponseBody@Controller*/@RestControllerpublic class HelloController { @RequestMapping(" ...