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

<!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. python爬虫19 | 遇到需要的登录的网站怎么办？用这3招轻松搞定！

    你好 由于你是游客 无法查看本文 请你登录再进 谢谢合作 当你在爬某些网站的时候 需要你登录才可以获取数据 咋整? 莫慌 小帅b把这几招传授给你 让你以后从容应对 那么 接下来就是 学习 python ...

  2. 【Codeforces 158A】Next Round

    [链接] 我是链接,点我呀:) [题意] 让你找到排名的前k名,并列的话,如果分数大于0那么就算晋级 问你最后有多少人可以晋级. [题解] 按照题意模拟就好, 先按照a[max] = a[k]的规则找 ...

  3. CentOS 6.5下mysql的安装与配置

    一.通过yum自动安装mysql yum install mysql-server my-client 二.初始化及相关配置 安装完mysql数据库以后,会发现会多出一个mysqld的服务,通过输入  ...

  4. [jdoj1258]野生动物园(change by panxf)_权值线段树_组合数

    人品计算 题目大意:n个数的a序列,m组询问.每次询问给出T,A,B,K.求在a序列的[A,B]的位置之内的K小值P,的$C_{T}^{P \% T} \% 10111$. 注释:每组询问保证区间只相 ...

  5. 改进MySQL Order By Rand()的低效率

    Author:flymorn Source:飘易Categories:PHP编程 PostTime:2011-1-14 15:35:07 正 文: 最近由于需要研究了一下MYSQL的随机抽取实现方法. ...

  6. nyoj891(区间上的贪心)

    题目意思: 给一些闭区间,求最少须要多少点,使得每一个区间至少一个点. http://acm.nyist.net/JudgeOnline/problem.php?pid=891 例子输入 4 1 5 ...

  7. spring 计时器

    spring 计时器 可以这样: http://blog.csdn.net/u010648555/article/details/52162840 也可以使用annotation <!-- 设置 ...

  8. python (001)----列表

    Python 的列表数据类型包含更多的方法.这里是所有的列表对象方法: list.append(x) 把一个元素添加到列表的结尾,相当于 a[len(a):] = [x]. ""& ...

  9. springboot + rabbitmq 整合示例

    几个概念说明:Broker:简单来说就是消息队列服务器实体.Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列.Queue:消息队列载体,每个消息都会被投入到一个或多个队列.Bindi ...

  10. win7下code::blocks开发环境

    一.环境配置步骤: 下载安装code::blocks; 下载安装MinGW; 在complier settings中, Toolchain executables选择MinGW的安装路径. 完成安装. ...