实现三联tab切换特效

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

实现三联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切换特效

 

你可能感兴趣的:(tab)