页面切换效果,该如何解决-C#教程-爱易网页

页面切换效果,该如何解决

日期：2014-05-20　浏览次数：20687 次

页面切换效果
这个页站

http://www.dqus.com

Discuz论坛的页面切换效果是如何实现的？

------解决方案--------------------

HTML code



本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ws_hgo/archive/2009/11/23/4857669.aspx

<!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>  
    <title>jquery实现菜单切换</title>  
  
    <mce:script src="../脚本/jquery-1.3.2.min.js" mce_src="脚本/jquery-1.3.2.min.js" type="text/javascript"></mce:script>  
    <mce:script type="text/javascript"><!--   
    $(function(){   
    var $div=$("div.title span");   
    $div.bind("click",function(){   
      $(this).addClass("select").siblings().removeClass("select");   
      var $index=$div.index(this);   
      $(".content div").eq($index).show().siblings().hide();   
    })   
    })   
       
// --></mce:script>  
    <mce:style type="text/css"><!--   
    .title   
    {   
        font-size:12px;   
        width:100px;   
        border:1px black;   
        border-style:ridge;   
    }   
    .select   
    {   
      color:Aqua;   
    }   
    .content   
    {   
        font-size:14px;   
        color:Maroon;   
        border-color:Black;   
        border-style:ridge;   
        border:1px;   
        width:100px;   
        height:100px;   
    }   
    .content a   
    {   
        width:100px;   
        height:100px;   
     }   
    .hide   
    {   
     display:none;     
    }   
    .selected   
    {   
        background-color:Red;   
    }   
       
--></mce:style><style type="text/css" mce_bogus="1">    .title   
    {   
        font-size:12px;   
        width:100px;   
        border:1px black;   
        border-style:ridge;   
    }   
    .select   
    {   
      color:Aqua;   
    }   
    .content   
    {   
        font-size:14px;   
        color:Maroon;   
        border-color:Black;   
        border-style:ridge;   
        border:1px;   
        width:100px;   
        height:100px;   
    }   
    .content a   
    {   
        width:100px;   
        height:100px;   
     }   
    .hide   
    {   
     display:none;     
    }   
    .selected   
    {   
        background-color:Red;   
    }   
    </style>  
</head>  
<body>  
<div>  
<div class="title">  
<span>体育</span>  
<span>娱乐</span>  
<span>Jquery</span>  
</div>  
<div class="content">  
<div>体育信息就这这里www.163.com</div>  
<div class="hide">娱乐就这娱乐星空卫视</div>  
<div class="hide">blog.csdn.net/ws_hgo</div>  
</div>  
</div>  
</body>  
</html>

------解决方案--------------------

JS动态变化皮肤
var obj = document.getElementById("div1");  
obj.className=obj.className=="active2"?"active":"active2";
http://topic.csdn.net/u/20081119/17/712f1339-bb3b-4342-8963-cb889c24732d.html

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

页面切换效果,该如何解决

相关资料更多>

推荐阅读更多>