javascript——卡片切换

卡片切换···并且下面的内容也跟着切换（看不懂就看图···）

先说下思路

当鼠标经过的时候 改变背景图片 并且下面的内容跟着改变

<table  background="images/bg.jpg" height="290px" width="169px">
    
    	<tr id="trs">
        	<td ><div id="div1" οnmοusemοve="mover(this)" οnmοuseοut="outer(this)">小说</div></td>   //传参的时候传递的this  感觉会方便很多
            <td ><div id="div2" οnmοusemοve="mover(this)" οnmοuseοut="outer(this)">非小说</div></td>
            <td ><div id="div3" οnmοusemοve="mover(this)" οnmοuseοut="outer(this)">文学</div></td>
        </tr>
        
    	<tr>
        	<td colspan="3">
            	<ul id="ul1">
                	<li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                </ul>
                <ul id="ul2">
                	<li>11</li>
                    <li>22</li>
                    <li>33</li>
                    <li>44</li>
                    <li>55</li>
                    <li>66</li>
                    <li>77</li>
                    <li>88</li>
                </ul>
                <ul id="ul3">
                	<li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                    <li>555</li>
                    <li>666</li>
                    <li>777</li>
                    <li>888</li>
                </ul>
            </td>
            
        </tr>
        
    </table>
	
</body>

这里偷懒 用的Table 布局 

上面的文字用div包裹了下（加不加没啥区别）

 下面的内容用ul包裹  当鼠标经过的时候 通过设置 ul 的隐藏 / 显示 来达到 切换内容的效果

再看看css

<style type="text/css">
	*{margin:0;
	padding:0;}
	
	#ul2{
		display:none;} //因为默认情况下是显示第一个
	#ul3{
		display:none;}//所以 ul2 ul3设置隐藏
	ul li{
		list-style:none;
		padding-left:10px;}
	#trs td{
		padding-top:50px;
		height:23px;
		width:43px;}
    	div{
		margin-left:5px;
		height:23px;
		width:43px;
		font-size:10px;
		background:url(images/menu1.gif);
		}

	.over{
		background:url(images/menu2.gif); //这个方法 是用来设置className
		}
	.out{
		background:url(images/menu1.gif); //这个方法 是用来设置className

		}	
	</style>

除了设置了布局以外   还有两个方法是为了在Js中调用  给className 设置的QwQ 直接看js吧

<script type="text/javascript">
    
    	function mover(t){
			t.className="over";
			if(t.innerHTML=="小说"){
				document.getElementById("ul1").style.display="inherit";
				document.getElementById("ul2").style.display="none";
				document.getElementById("ul3").style.display="none";}
			if(t.innerHTML=="非小说"){
				document.getElementById("ul2").style.display="inherit";
				document.getElementById("ul1").style.display="none";
				document.getElementById("ul3").style.display="none";}
			if(t.innerHTML=="文学"){
				document.getElementById("ul3").style.display="inherit";
				document.getElementById("ul2").style.display="none";
				document.getElementById("ul1").style.display="none";}
			}
		function outer(t){
			t.className="out";
			}
		
    
    </script>

js中设置了一个className 是为了设置鼠标移动时的样式改变  其他的无非就是 ul的显示 / 隐藏 达到内容跟着一起切换的效果