实现三联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" οnmοuseοver="show1()" οnmοuseοut="out()">小说</div>
<div class="img" id="id2" οnmοuseοver="show2()" οnmοuseοut="out()">非小说</div>
<div class="img" id="id3" οnmοuseοver="show3()" οnmοuseοut="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>
转载于:https://www.cnblogs.com/wlx520/p/4500249.html
实现三联tab切换特效相关推荐
- js第三章简答题5(制作如图所示的Tab切换效果)
ps:代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- HTML第三次作业——Tab切换和轮播图
第一题:完全模仿京东首页的每日特价专栏制作一个Tab切换效果,除了图片大小和图片具体内容不一样外,其它部分要求高仿,即内容部分也要求高仿,即也是由图片和文字的组合构成,最左边也是一张图片. 效果图:代 ...
- jQuery特效Tab切换栏选项卡demo
在建站过程中,有时候需要有效利用页面空间,需要将多个模块的链接.图片.视频等网站资源放在一个div中,实现点击或者滑动实现展示多个模块,多用在侧边栏展示网站最新更新.最热文章,或者是展示顶级频道页面下 ...
- 分享111个JS图片切换特效，总有一款适合您
分享111个图片切换,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...
- 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...
- cocos2d-x 3.x 场景切换特效大集合
游戏开发中经常需要用到Cocos2d-x 3.x中的场景切换特效,本文中进行一下汇总. 基本使用思路如下: ? 1 2 3 auto scene=HelloWorld::c ...
- jquery实现tab切换加自动滚动切换
1.用插件switchTab $("#switchBox7").switchTab({defaultIndex: "1", titCell: "dt ...
- Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
- tab切换实现方式1
tab切换实现方式1: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
最新文章
- DeepMind-深度学习: AI革命及其前沿进展 (54页ppt报告）
- __call__() got an unexpected keyword argument 'partition_info'
- JQuery的摸索之路（二比较）
- idea代码调试debug篇
- 【Ubuntu-screen】服务器上使用screen的常用命令
- # 保持最外层获取焦点_大事件！沈阳爱尔白内障焕晶诊疗中心正式启用，两位PanOptix三焦点人工晶体植入患者清晰见证！...
- javascript 变量作用域
- qt android程序联网死机,Qt for Android（九） ——APP 崩溃卡死拉起保活实战
- MySQL数据库安装Version5.7.25
- （转） 淘淘商城系列——使用FastDFS-Client客户端进行上传图片的测试
- TP5 验证-内置规则
- 控制Arduino的利器-Windows Remote Arduino
- 禁止浏览器记录 文本框之前输入过的内容
- 【python博客爬虫】
- 中国移动”5G大规模外场测试技术要求(V1.0)”基站要求
- 怎样更改itunes备份位置_正确修改itunes备份文件路径方法
- 云虚拟主机升级云服务器,云虚拟主机升级
- windows7远程桌面
- Mysql 2003错误 10038 1045 （推荐第七次解决方案）
- 脑电数据分析方法与应用实例简介-EEG Processing and Feature 1