页面切换效果,该如何解决
日期：2014-05-20 浏览次数：20639 次
页面切换效果
这个页站
http://www.dqus.com
Discuz论坛的页面切换效果是如何实现的？
------解决方案--------------------
这个页站
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
