阔屏、标屏页面切换

宽屏、标屏页面切换
宽屏、标屏页面切换,遗憾的是切换一次后就切换不了了,请赐教！



<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>宽屏、标屏页面切换</title>

<style>

body { margin:0;}

#bigWidth { width:100%;}

#normalWidth { width:950px; margin:0 auto;}

.top { width:100%; height:60px; background:#666; overflow:hidden;}

.left { width:25%; height:200px; float:left; background:#09C;}

.right { width:75%; height:200px; float:right; background: #66C;}

.foot { width:100%; height:50px; background:#CCC;}

.clear { clear:both;}


.top span { display:block; margin:20px; width:100px; height:30px; background:#960; cursor:pointer;}

</style>

</head>


<body>

<script>

function addLoadEvent(func){

	var onload=window.onload;

	if(typeof window.onload !="function"){

		window.onload=func;

	}else{

		window.onload=function(){

			oldonload();

			func();

		}

	}

}

function WS(){

	var SB=document.getElementById("SB");

	var bigWidth=document.getElementById("bigWidth");

	var bigId=bigWidth.getAttribute("id");

	SB.onclick=function(){

		//alert("test");

		bigWidth.setAttribute("id","normalWidth");

		SB.innerHTML="宽屏";

	}

}


addLoadEvent(WS);

</script>


<div id="bigWidth">

  <div class="top"><span id="SB">标屏</span></div>

  <div class="left"></div>

  <div class="right"></div>

  <div class="clear"></div>

  <div class="foot"></div>

</div>

</body>

</html>

------解决方案--------------------
这段代码你写的？



function WS(){

    var SB=document.getElementById("SB");

    var bigWidth=document.getElementById("bigWidth");

    var bigId=bigWidth.getAttribute("id");

    SB.onclick=function(){

        //alert("test");

		if(bigWidth.id=="bigWidth"){

			bigWidth.setAttribute("id","normalWidth");

			SB.innerHTML="宽屏";

		}else{

			bigWidth.setAttribute("id","bigWidth");

			SB.innerHTML="标屏";

		}

    }

}

------解决方案--------------------
你所谓的"先判断，再写鼠标事件"没看出在那里。

即然是个切换事件，在行为里处理不是很自然吗。
------解决方案--------------------
事件驱动，先有事件，再有操作。
操作简单的，就是分析现有文档结构(在这里就是判断ID)，然后直接处理
复杂操作修改了文档结构，再重新绑定事件。

你的要求用简单的方法就可以搞定，
用复杂的也行，只是容易混乱。

阔屏、标屏页面切换

相关推荐