打印

[其它] 自己写的换肤效果

alou [楼主]

小娄

高级会员

帖子: 345
体力: 722
威望: 0
当前: 上海徐汇
离线: 1 天

专长 前端制作,JS

1^# 大中小发表于 2008-5-5 10:32

正在苦学JS，cookie函数不是自己写的，通用的呵呵！~

<!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=gb2312" />
<title>换肤</title>
<style type="text/css">
body{font-size:12px}
*{margin:0;padding:0;}
ul,li{list-style:none}
.login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;width:215px;color:#333;line-height:25px;margin:25px 0px 25px 10px;padding-left:15px;}
.login_skin li{float:left}
.login_skin .bor{border-right:1px solid #e9e8e5; padding-right:7px; margin-right:10px}
.login_skin li span{margin:7px 4px 0px 0px;cursor:pointer;display:block}
.login_skin li span em{display:block;height:9px;width:10px;overflow:hidden;text-indent:-9999px}
.login_skin a{color:#333;text-decoration:none; margin-right:5px}
.login_skin li .on{ border:1px solid #333;cursor:default}
h2{font-size:12px; padding:8px 0px 10px 15px}
#sk_blue{background:#2086b3;}
#sk_or{background:#e64c13}
#sk_byu{background:#b7a37a;}
#warpper{overflow:hidden;height:1%}
.contentl{margin-right:-244px;float:left;width:100%}
.contentr{width:230px;float:right;}
.main{margin-right:254px;margin-left:10px;height:300px}
.footer{height:30px;margin:30px 10px 0px 10px}
.blue .content{background:#2086b3;color:#fff;}
.blue .bb{border:2px solid #2086b3;}
.blue .footer{background:#2086b3;}
.or .content{background:#e64c13}
.or .bb{border:2px solid #e64c13;}
.or .footer{background:#e64c13;}
.byu .content{background:#b7a37a;color:#f00}
.byu .bb{border:2px solid #b7a37a;}
.byu .footer{background:#b7a37a;}
</style>
<script type="text/javascript">
function setOnloadEvent(func){
	 var oldonload = window.onload;
	 if(typeof window.onload != "function"){
		  window.onload = func;
	 }
	 else{
	    window.onload = function(){
	    	 oldonload();
	    	 func();
	    }	
	 }
}
// --- 设置cookie
function setCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
//--- 获取cookie
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function skin(){
 if(!document.getElementsByTagName) return false;
 if(!document.getElementById("skin")) return false;
 var skin_id="blue";
 if(getCookie("id")!=null){
      skin_id=getCookie("id");
   }
 var span_id=skin_id+"_sp";
 var span_on=document.getElementById(span_id);
 document.body.className=skin_id;
 span_on.className="on";
 var skinType=document.getElementById("skin");
 var skin_nub=skinType.getElementsByTagName("em");
 for(var i=0; i<skin_nub.length;i++){
    skin_nub[i].onclick=function(){
    var em_id=this.getAttribute("id");
    var skin_id=em_id.split("_")[1];
    var spanList=document.getElementsByTagName("span");
    for(var j=0;j<spanList.length;j++){
       spanList[j].className="";
       if(spanList[j].getAttribute("id").indexOf(skin_id)!=-1)
       {
       spanList[j].className="on";
       }
    }
     document.body.className=skin_id;
    setCookie("id",skin_id,1);
   }
  }
}
setOnloadEvent(skin);  
</script>
</head>
<body>
<div id="header">
<div class="login_skin" id="skin">
  <ul>
	<li><a href="">登陆</a></li>
	<li class="bor"><a href="">注册</a></li>
	<li>选择页面风格：</li>
	<li><span id="blue_sp"><em id="sk_blue">ee</em></span></li>
	<li><span id="or_sp"><em id="sk_or">ere</em></span></li>
	<li><span id="byu_sp"><em id="sk_byu">ere</em></span></li>
  </ul>
</div>
</div>
<div id="warpper">
  <div class="contentl" >
    <div class="main bb"><h2>换肤测试</h2></div>
  </div>
  <div class="contentr bb" ><h2>换肤测试</h2></div>
</div>
<div class="footer"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 alou 于 2008-5-5 13:49 编辑 ]

小娄

TOP

做西部数码代理.Cn1元国际45元

cuikai

银牌会员

帖子: 1490
体力: 2033
威望: 7
当前: 北京海淀区

专长 UI,前端制作

2^# 大中小发表于 2008-5-5 10:39

拓展性很高呀，

很容易进行修改~~~

<!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=gb2312" />
<title>换肤</title>
<style type="text/css">
body{font-size:12px}
*{margin:0;padding:0;}
ul,li{list-style:none}
.login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;width:215px;color:#333;line-height:25px;margin:25px 0px 25px 10px;padding-left:15px;}
.login_skin li{float:left}
.login_skin .bor{border-right:1px solid #e9e8e5; padding-right:7px; margin-right:10px}
.login_skin li span{margin:7px 4px 0px 0px;cursor:pointer;display:block}
.login_skin li span em{display:block;height:9px;width:10px;overflow:hidden;text-indent:-9999px}
.login_skin a{color:#333;text-decoration:none; margin-right:5px}
.login_skin li .on{ border:1px solid #333;cursor:default}
h2{font-size:12px; padding:8px 0px 10px 15px}
#sk_blue{background:#2086b3;}
#sk_or{background:#e64c13}
#sk_byu{background:#b7a37a;}
#warpper{overflow:hidden;height:1%}
.contentl{margin-right:-244px;float:left;width:100%}
.contentr{width:230px;float:right;}
.main{margin-right:254px;margin-left:10px;height:300px}
.footer{height:30px;margin:30px 10px 0px 10px}
.blue .content{background:#2086b3;color:#fff;}
.blue .bb{border:2px solid #2086b3;}
.blue .bb h2{ color:#2086b3}
.blue .footer{background:#2086b3;}
.or .content{background:#e64c13}
.or .bb{border:2px solid #e64c13;}
.or .bb h2{ color:#e64c13}
.or .footer{background:#e64c13;}
.byu .content{background:#b7a37a;color:#f00}
.byu .bb{border:2px solid #b7a37a;}
.byu .bb h2{ color:#b7a37a}
.byu .footer{background:#b7a37a;}
</style>
<script type="text/javascript">
function setOnloadEvent(func){
	 var oldonload = window.onload;
	 if(typeof window.onload != "function"){
		  window.onload = func;
	 }
	 else{
	    window.onload = function(){
	    	 oldonload();
	    	 func();
	    }	
	 }
}
// --- 设置cookie
function setCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
//--- 获取cookie
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function skin(){
 if(!document.getElementsByTagName) return false;
 if(!document.getElementById("skin")) return false;
 var skin_id="blue";
 if(getCookie("id")!=null){
      skin_id=getCookie("id");
   }
 var span_id=skin_id+"_sp";
 var span_on=document.getElementById(span_id);
 document.body.className=skin_id;
 span_on.className="on";
 var skinType=document.getElementById("skin");
 var skin_nub=skinType.getElementsByTagName("em");
 for(var i=0; i<skin_nub.length;i++){
    skin_nub[i].onclick=function(){
    var em_id=this.getAttribute("id");
    var skin_id=em_id.split("_")[1];
    var spanList=document.getElementsByTagName("span");
    for(var j=0;j<spanList.length;j++){
       spanList[j].className="";
       if(spanList[j].getAttribute("id").indexOf(skin_id)!=-1)
       {
       spanList[j].className="on";
       }
    }
     document.body.className=skin_id;
    setCookie("id",skin_id,1);
   }
  }
}
setOnloadEvent(skin);  
</script>
</head>
<body>
<div id="header">
<div class="login_skin" id="skin">
  <ul>
	<li><a href="http://club.pps.tv/index.php?m=login">登陆</a></li>
	<li class="bor"><a href="http://club.pps.tv/index.php?m=register">注册</a></li>
	<li>选择页面风格：</li>
	<li><span id="blue_sp"><em id="sk_blue">ee</em></span></li>
	<li><span id="or_sp"><em id="sk_or">ere</em></span></li>
	<li><span id="byu_sp"><em id="sk_byu">ere</em></span></li>
  </ul>
</div>
</div>
<div id="warpper">
  <div class="contentl" >
    <div class="main bb"><h2>换肤测试</h2></div>
  </div>
  <div class="contentr bb" ><h2>换肤测试</h2></div>
</div>
<div class="footer"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

北京-求职-7500税后:http://resume.uicss.cn

TOP

【美橙超级G空间】688元绑定10个子目录 | 500M免费网盘空间，文件永久保留，专业服务高端设计人员

pobear

初级会员

帖子: 42
体力: 85
威望: 0
当前: 北京朝阳区

专长 前端制作,JS,PHP

3^# 大中小发表于 2008-5-5 13:05

不错，
不过如果页面再复杂一些，还是得通过动态载入样式进行换肤。

TOP

请大家尊重和保护奥运知识产权。

zhutianyi

高级会员

帖子: 647
体力: 644
威望: 0
当前: 上海长宁

4^# 大中小发表于 2008-5-5 13:21

哪里另类了？

TOP

您知道经典哪些会员写过书的吗？

您知道互联网职业和技能有哪些吗？

您知道网站运营核心是什么吗？

ystar

中级会员

帖子: 145
体力: 258
威望: 0
当前: 浙江杭州
离线: 11 天

专长 前端制作,SEO

5^# 大中小发表于 2008-5-5 13:34

是啊,另类在哪里?标题挺忽悠人的

www.chuxuezhe.net

TOP

kl19872

花会开

中级会员

帖子: 151
体力: 309
威望: 0
当前: 山东荷泽
离线: 4 天

6^# 大中小发表于 2008-5-12 22:18

对cookie函数不了解
请问如何做到为各个独立的div换肤并保存如

<!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" lang="zh-CN">
<head>
    <style type="text/css" />
body {
    background-color: white;
}
.style1{
width: 270px;
margin: 0px auto;
border:1px solid #92B0DD;
background-color: #FFFFFf;
position: absolute;
}
.style1 h5{
margin: 1px;
background-color: #E2EAF8;
height: 21px;
padding: 0px 0px 0px 30px;
}
.style2{
width: 270px;
height: 21px;
margin: 0px auto;
border:1px solid #9BDF70;
position: absolute;
background-color: #F0FBEB
}
.style2 h5{
margin: 1px;
background-color: #C2ECA7;
height: 21px;
padding: 0px 0px 0px 30px;
}
.style3{
width: 270px;
height: 21px;
margin: 0px auto;
border:1px solid #96C2F1;
position: absolute;
background-color: #EFF7FF
}
.style3 h5{
	margin: 1px;
	background-color: #B2D3F5;
	height: 21px;
	padding: 0px 0px 0px 30px;
}
a{
	font: normal 12px arial,SimSun,verdana,sans-serif;
        text-decoration: none;
        float: right;
        padding-left: 3px;
        padding-right: 3px;
        line-height: 25px;
}
a link{
        color: #000;
}
a visited{
        color: #039;
}
a hover{
        color: #069;
        text-decoration: underline;
}
a active{
        color: #069;
}
#left {
    width: 600px;
    float: left;
}
#right {
    width: 300px;
    float: left;
}
.column {
    width: 280px;
    float: left;
    padding-bottom: 10px;
}
.dragMod {
    display: block;
    width: 275px;
    background-color: #eef;
    border: #A00 dashed 2px;  
    filter : progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=30,finishOpacity=100);
    opacity: 0.3;
}
.dragingMod {
    display: block;
    width: 275px;
    background-color: #fee;
    filter : progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=50,finishOpacity=100);
    opacity: 0.5;
}
.module {
    width: 70px;
    background-color: #fff;
	padding: 0px 0px 5px 0px;
}
.modTitle {
    width: 70px;
    cursor: move;
    height: 25px;
	position:relative;
	padding-bottom: 10px;
}
.modTitleLeft {
    width: 260px;
    float: left;
}
.modTitleRight {
    float: left;
}
.modTitleRight a{
    text-decoration: none;
}
.modContent {
    margin-bottom: 3px;
}
</style>
<script type="text/javascript">
//移动div
var utility = {
    /* function getPostion              */
    /* PARAM:  e: object                */
    /* RETURN: e's position in document */
    getPosition : function (e)
    {
    	var left = 0;
    	var top  = 0;
    	while (e!=null)
    	{
    		left += e.offsetLeft;
    		top  += e.offsetTop;
    		e     = e.offsetParent;
    	}
    	return {x:left, y:top};
    }
}
var eventManager = function (){
    var m_events = {};
    
    this.attachEvent = function (handleName, handleFunc){
        m_events[handleName] = handleFunc;
    }
    this.detachEvent = function (handleName){
        m_events[handleName] = null;
    }
    this.fire = function (){
        for(var handleName in m_events)
        {
            if (m_events[handleName])
            {
                m_events[handleName].apply(this, arguments);
            }
        }
    }
}
var Animate = function (startPos, endPos, steps, timeval, obj, endFunc){
    var m_steps = steps||0;
    var m_done;
    var m_timeval = timeval||0;
    var m_startPos = startPos||{x:0, y:0};
    var m_endPos = endPos||{x:0, y:0};
    var m_step = {x:0, y:0};
    var m_timer = null;
    var m_obj = obj||null;
    var m_this = this;
    var m_endFunc = endFunc||null;
    this.doing = false;
    
    this.init = function (startPos, endPos, steps, timeval, obj, endFunc){
        m_steps = steps||0;
        m_timeval = timeval||0;
        m_startPos = startPos||{x:0, y:0};
        m_endPos = endPos||{x:0, y:0};
        m_timer = null;
        m_obj = obj||null;
        m_endFunc = endFunc||null;
    }
    function going(){
        if (!m_timer) return;
        m_done++;
        if (m_done < m_steps)
        {
            m_obj.style.left = parseInt(m_startPos.x+m_done*m_step.x)+"px";
            m_obj.style.top = parseInt(m_startPos.y+m_done*m_step.y)+"px";
        }
        else
        {
            clearInterval(m_timer);
            m_this.doing = false;
            if (m_endFunc)
                m_endFunc();
        }
    }
    this.start = function (){
        if (m_obj&&m_obj.style)
            m_obj.style.position = "absolute";
        m_step.x = (m_endPos.x - m_startPos.x)/m_steps;
        m_step.y = (m_endPos.y - m_startPos.y)/m_steps;
        m_done = 0;
        this.doing = true;
        m_timer = setInterval(going, m_timeval);
    }
}
var dragdrop = function (){
    var dropList = [];
    var dragOffset = {x:0, y:0};
    var dragDropping = null;
    var dragObject = null;
    var dragInsert = null;
    var dragHelper = null;
    var dragAnimate = new Animate();
    
    /* function getdragOffsetset                                             */
    /* PARAM:  target: object                                                */
    /*         ev:  event                                                    */
    /* RETURN: target's postion offset to mouse position                     */
    function getdragOffsetset(target, ev)
    {
    	ev = ev || window.event;
    
    	var docPos    = utility.getPosition(target);
    	var mousePos  = {x:ev.clientX + document.documentElement.scrollLeft,
    	                 y:ev.clientY + document.documentElement.scrollTop};
    	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
    }
    /* function makeDraggable                                                */
    /* PARAM:  item: draggable item                                          */
    /* RETURN: N/A                                                           */
    function makeDraggable(item)
    {
    	if(!item) return;
    	/* event handle for drag start */
    	item.onmousedown = function (ev)
    	{
    	    if (dragAnimate.doing) return;
    	    var thisP = this.parentNode;
    	    var objPos  = utility.getPosition(this);
    	    /* copy the drag object to dragHelper */
    		dragObject = dragHelper;
            dragObject.style.position = "absolute";
            dragObject.style.top = objPos.y+"px";
            dragObject.style.left = objPos.x+"px";
    	    dragObject.innerHTML = thisP.innerHTML;
    	    dragObject.style.display = "block";
            dragObject.className = 
                                thisP.className.replace("module", "dragingMod");
            
            /* record drag offset */
    		dragOffset = getdragOffsetset(this, ev);
    		thisP.className = thisP.className.replace("module", "dragMod");
    		dragDropping = thisP;
    		return false;
    	}
    }
    
    function makeDropList(item)
    {
        /* push item in to dropable item list */
        dropList.push(item);
    }
    
    /* function dropIt -- drop item in the drop container                    */
    /* PARAM:  dropArea: drop container, mousePos: mouse position            */
    /* RETURN: N/A                                                           */    
    function dropIt(dropArea, mousePos)
    {
        var chd;
        
        for(var i = 0; i < dropArea.childNodes.length; i++)
        {
            chd = dropArea.childNodes[i];
            if(!chd||!(chd.className)||chd.className.indexOf('module')==-1)
                continue;
            var chdPos = utility.getPosition(chd);
            var linePos = chdPos.y + chd.offsetHeight/2;
            if (linePos > mousePos.y)
            {
                if (chd != dragInsert)
                {
                    /*insert*/
                    dropArea.insertBefore(dragDropping, chd);
                    dragInsert = chd;
                }
                return;
            }
        }
        if (dragInsert != dropArea)
        {
            /* insert into the end */
            dropArea.insertBefore(dragDropping, null);
            dragInsert = dropArea;
        }
    }
    
    /* test drop to which container */
    function testDrop(mousePos)
    {
        for(var i=0; i < dropList.length; i++)
        {
            var dropArea = dropList[i];
            var pos = utility.getPosition(dropArea);
            if ((mousePos.x > pos.x)&&
                (mousePos.x < pos.x+dropArea.offsetWidth))
            {
                dropIt(dropArea, mousePos);
                return;
            }
        }
    }
    
    /* init dragable items and dropable list */
    this.init = function (dragName, dropName)
    {
        var divs = document.getElementsByTagName("div");
        for(var i=0; i<divs.length; i++)
        {
            
            if (divs[i].className == dragName)
                makeDraggable(divs[i]);
                
            if (divs[i].className == dropName)
                makeDropList(divs[i]);
        }
        
        dragHelper = document.createElement('DIV');
        dragHelper.style.cssText = 'position:absolute;display:none;';
        document.body.appendChild(dragHelper);
    };
    
    this.mouseMove = function (ev)
    {
        if (dragAnimate.doing) return;
        
        ev = ev || window.event;
    
        if(dragObject)
        {
    	    var mousePos  = {x:ev.clientX + document.documentElement.scrollLeft,
    	                     y:ev.clientY + document.documentElement.scrollTop};
            dragObject.style.position = "absolute";
            dragObject.style.top = (mousePos.y - dragOffset.y)+"px";
            dragObject.style.left = (mousePos.x - dragOffset.x)+"px";
            testDrop(mousePos);
        }
        return false;
    };
    function startAnimate()
    {
        function endAnimate()
        {
            dragObject.innerHTML = "";
            dragObject.style.display = "none";
            dragObject = null;
            dragDropping.className =
                    dragDropping.className.replace("dragMod", "module");
        }
        var endPos = utility.getPosition(dragDropping);
        var startPos = {};
        startPos.x = parseInt(dragObject.style.left);
        startPos.y = parseInt(dragObject.style.top);
        dragAnimate.init(startPos, endPos, 20, 3, dragObject, endAnimate);
        dragAnimate.start();
    }
    
    this.mouseUp = function (ev){
        if (dragAnimate.doing) return;
        
        if (dragObject)
        {
            startAnimate();
        }
        return false;
    };
}
var dragIt = new dragdrop();
var onMouseMv = new eventManager();
var onMouseU = new eventManager();
onMouseMv.attachEvent("mouseMove", dragIt.mouseMove);
onMouseU.attachEvent("mouseUp", dragIt.mouseUp);
document.onmousemove = onMouseMv.fire;
document.onmouseup = onMouseU.fire;
window.onload = function (){dragIt.init("modTitle", "column");};
var mouseOverMenu = function (ev) {
    if(!this||!this.childNodes) return;
    
    for(var i in this.childNodes)
    {
        if(this.childNodes[i]&&this.childNodes[i].className&&
           this.childNodes[i].className=="subMenu")
        {
            var pos = utility.getPosition(this);
            this.childNodes[i].style.display = "block";
            this.childNodes[i].style.position = "absolute";
            this.childNodes[i].style.left = pos.x+this.offsetWidth/3*2+"px";
            this.childNodes[i].style.top = pos.y+"px";
        }
    }
}
var mouseOutMenu = function (ev) {
    if(!this||!this.childNodes) return;
    
    for(var i in this.childNodes)
    {
        if(this.childNodes[i]&&this.childNodes[i].className&&
           this.childNodes[i].className=="subMenu")
        {
            this.childNodes[i].style.display = "none";
        }
    }
}
//显示隐藏div
function toggle(targetid){
    if (document.getElementById){
        target=document.getElementById(targetid);
            if (target.style.display=="none"){
                target.style.display="block";
            } else {
                target.style.display="none";
            }
    }
}
//换肤
function setsty(fid,st){
document.getElementById(fid).className=st
}
</script> 
</head>
<body>
<div style="height: 100px;width: 100%;">
</div>
<div id="left">
<div class="column">
<div class="module" inside="mod1">
<div class="style1" id="f1">
					<h5>
					<a href="#" onclick="setsty('f1','style3')">样式二</a>
					<a href="#" onclick="setsty('f1','style2')">样式一</a>
					<a href="#" onclick="setsty('f1','style1')">默认样式</a>
					<a href="#" onclick="toggle('div1')">显示隐藏</a>
					</h5>
					<div class="modContent" id="div1">
					第一个
					</div>
</div>
<div class="modTitle"></div>
<div class="modTitleLeft">
</div>
</div>
<div class="module" inside="mod2">
<div class="style1" id="f2">
					<h5>
					<a href="#" onclick="setsty('f2','style3')">样式二</a>
					<a href="#" onclick="setsty('f2','style2')">样式一</a>
					<a href="#" onclick="setsty('f2','style1')">默认样式</a>
					<a href="#" onclick="toggle('div2')">显示隐藏</a>
					</h5>
					<div class="modContent" id="div2">
					第二个
					</div>
</div>
<div class="modTitle"></div>
<div class="modTitleLeft">
</div>
</div>
</div>
<div class="column">
<div class="module" inside="mod3">
<div class="style1" id="f3">
					<h5>
					<a href="#" onclick="setsty('f3','style3')">样式二</a>
					<a href="#" onclick="setsty('f3','style2')">样式一</a>
					<a href="#" onclick="setsty('f3','style1')">默认样式</a>
					<a href="#" onclick="toggle('div3')">显示隐藏</a>
					</h5>
					<div class="modContent" id="div3">
					第三个
					</div>
</div>
<div class="modTitle"></div>
<div class="modTitleLeft">
</div>
</div>
<div class="module" inside="mod4">
<div class="style1" id="f4">
					<h5>
					<a href="#" onclick="setsty('f4','style3')">样式二</a>
					<a href="#" onclick="setsty('f4','style2')">样式一</a>
					<a href="#" onclick="setsty('f4','style1')">默认样式</a>
					<a href="#" onclick="toggle('div4')">显示隐藏</a>
					</h5>
					<div class="modContent" id="div4">
					第四个
					</div>
</div>
<div class="modTitle"></div>
<div class="modTitleLeft">
</div>
</div>
</div>
</div>
<div id="right">
<div class="column">
<div class="module" inside="mod5">
<div class="style1" id="f5">
					<h5>
					<a href="#" onclick="setsty('f5','style3')">样式二</a>
					<a href="#" onclick="setsty('f5','style2')">样式一</a>
					<a href="#" onclick="setsty('f5','style1')">默认样式</a>
					<a href="#" onclick="toggle('div5')">显示隐藏</a>
					</h5>
					<div class="modContent" id="div5">
					第五个
					</div>
</div>
<div class="modTitle"></div>
<div class="modTitleLeft">
</div>
</div>
</div>
</div>
</div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

MarVell

高级会员

帖子: 725
体力: 720
威望: 0
当前: 河南洛阳

专长 前端制作

7^# 大中小发表于 2008-5-13 00:59

CSS里再添一写注释那就更方便了

不在放荡中变坏,就在沉默中变态...

TOP

ixiaoyu

忧伤的小鱼

中级会员

帖子: 300
体力: 273
威望: 0
当前: 河南郑州

专长 前端制作

8^# 大中小发表于 2008-5-13 10:33

正在找这个呢,要好好学习学习

web标准群:30161876

TOP

aiyasoft

初级会员

帖子: 52
体力: 84
威望: 0
当前: 北京朝阳区
离线: 8 天

9^# 大中小发表于 2008-5-13 15:09

好好学习学习好好学习学习

QQ:275333

TOP

poul

新手上路

帖子: 13
体力: 32
威望: 0
当前: 海南海口
离线: 22 天

10^# 大中小发表于 2008-5-14 00:23

刚开始学这些都觉得好难

poul↗▁▂

TOP

门文化

中级会员

帖子: 94
体力: 243
威望: 0
当前: 河南焦作
离线: 21 天

11^# 大中小发表于 2008-5-14 09:59

不错的，刚才还在找，收藏了

大千世界，没文化！

TOP

hsandmx

初级会员

帖子: 109
体力: 55
威望: 0
离线: 25 天

专长 SEO,网站运营,市场

12^# 大中小发表于 2008-5-15 12:00

这个还是不错的。拷了

相信品牌的力量，提供
域名注册
虚拟主机深圳网站建设

TOP

zoe007

初级会员

帖子: 19
体力: 52
威望: 0
离线: 1 天

专长 网页设计,平面,前端制作

13^# 大中小发表于 2008-6-10 15:46

太牛了

太牛了。非常感谢大家

TOP

fuguojian1988

天天向网NET

银牌会员

帖子: 782
体力: 1618
威望: 0
当前: 河南商丘
离线: 10 天

专长 网页设计,平面,前端制作

14^# 大中小发表于 2008-6-10 17:37

不错，好好研究下

XHTML--CSS（Web标准）联盟 QQ群：6258367

TOP

qikii

初级会员

帖子: 24
体力: 58
威望: 0
当前: 浙江杭州
离线: 24 天

15^# 大中小发表于 2008-6-10 23:09

不久是用cookie保存状态吗。。。

TOP