实现三联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=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切换特效的更多相关文章
- WPF案例(-)模拟Windows7 Win+Tab切换
原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 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 ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
随机推荐
- SqlServer转换为Mysql(mss2sql)
SqlServer转换为Mysql(mss2sql)工具 http://pan.baidu.com/s/1c2d8R8O 参考链接: http://www.cnblogs.com/angestudy/ ...
- selenium等待
简介 在selenium操作浏览器的过程中,每一次请求url,selenium都会等待页面加载完成以后, 才会将操作权限在交给我们的程序. 但是,由于ajax和各种JS代码的异步加载问题,当一个页面被 ...
- Java8新特性之forEach遍历
参考文章: https://www.cnblogs.com/billyu/p/6118008.html
- Python 1 初识python
1.Python介绍 Python是一种高级语言,与JAVA C# 等同.可以编写各种应用程序,每种语言都有其合适的应用场景.而Python 的优势在于更加人性化.简便的语法规则,以及针对各种具体场景 ...
- App的登陆注册接口安全设计
最近一APP产品,我担任的主要模块之一是后台登录注册模块的接口开发.基本完成,就说说并记录一下关于登录注册接口的一些东西,因为也涉及到接口的安全方面的问题. 1.先一般的app的登录注册接口安全设计上 ...
- poj1330 lca 最近公共祖先问题学习笔记
首先推荐两个博客网址: http://dongxicheng.org/structure/lca-rmq/ http://scturtle.is-programmer.com/posts/30055. ...
- static 语句块
static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法,下面我们详细的讨论一下该语句块的特性及应用. 一.在程序的一次执行过程中,stati ...
- R语言为数据框添加列名或行名
1.添加列名 wts=c(1,1,1) names(wts)=c("setosa","versicolor","virginica") 2. ...
- 用MJExtension简化MVC
首先引入MJExtension框架 模型 #import <Foundation/Foundation.h> @interface FundsModel : NSObject /** * ...
- HDU 5538/ 2015长春区域 L.House Building 水题
题意:求给出图的表面积,不包括底面 #include<bits/stdc++.h> using namespace std ; typedef long long ll; #define ...