实现三联tab切换特效

最新推荐文章于 2023-02-11 11:28:40 发布

weixin_30668887

最新推荐文章于 2023-02-11 11:28:40 发布

阅读量392

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/wlx520/p/4500249.html

版权

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

<!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

weixin_30668887

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现三联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.w...
复制链接

扫一扫