实现三联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, ...
随机推荐
- Python基础-while
使用while循环实现输出2-3+4-5+6.....+100的和. i = 2 sum=0 while i<=100: if i % 2 == 0: sum += i else: sum -= ...
- Spring MVC 单元测试Demo
@RunWith(SpringJUnit4ClassRunner.class) @WebAppConfiguration @ContextConfiguration(locations={" ...
- scrapy——8 scrapyd使用
scrapy——8 scrapyd使用 什么是scrapyd 怎么安装scrapyd 如何使用scrapyd--运行scrapyd 如何使用scrapyd--配置scrapy.cfg 如何使用s ...
- GeoTrust 企业(OV)型 增强版(EV) 多域名(SAN/UC) SSL证书
GeoTrust 企业(OV)型 增强版(EV) 多域名(SAN/UC)SSL证书(GeoTrust True BusinessID With EV Multi-Domain(SAN/UC) SSL ...
- Tensorflow人工智能入门(一)
前言: 作为一个程序员,已经离开开发岗好多年,最近突然迷茫了,不知道自己何去何从.互联网技术发展的速度已快得难以想象,许久不码代码的手也越来越僵直,需求沟通中的套话和空话却越发的熟练,这和当年入行时的 ...
- mysql 数据的某个范围数据
select * from table_name where limit num1, num2; num1 : 开始条目 num2 :选择数目
- [bzoj4025]二分图_LCT
二分图 bzoj-4025 题目大意:给定一个n个节点的图,m条边,每条边有一个产生时间和一个删除时间,询问所有时间点是否是连通图. 注释:$1\le n\le 10^5$,$1\le m\le 2\ ...
- 记一次ruby的安装
1,下载rubyinstall 安装包及devkit包 登陆网站 :http://rubyinstaller.org/downloads/ 安装rubyinstall包时添加到环境变量 2,安装完in ...
- ZooKeeper配置文件常用配置项一览表(转)
配置参数详解(主要是$ZOOKEEPER_HOME/conf/zoo.cfg文件) 参数名 说明 clientPort 客户端连接server的端口,即对外服务端口,一般设置为2181吧. data ...
- linux 内核 2.5-4.7 版本change
https://kernelnewbies.org/LinuxVersions?action=show&redirect=Linux26Changes https://kernelnewbie ...