深圳网站建设论坛

注册

 

发新话题 回复该文章列表

深圳网站建设公司易捷网络科技分享无刷新切换网站风格代码

1#
看到别人网站都有一个无刷新切换风格的功能,深圳网站建设论坛小编自己很喜欢,但始终没找到方法,后来看了网上的教程,总算自己做出来了,下面只说关键步骤,相信通过这篇教程,你会搞定这个功能。
首先,我们需要自己写好几种CSS风格文件,这就是接下来要切换的CSS文件。比如“红色记忆”这款网页风格你可以保存为1.css,“绿草青青”你可以保存为2.css,蔚蓝天空可保存为3.css。各个CSS里面的代码那就靠你发挥自己的想像力了,这是你的事,我可不愿管这些。
各个CSS代码文件写成后,请按下面的方式引入到网页中:
<link rel="stylesheet" type="text/css" href="style/1.css" title="CSS1" ID="CSS1">
<link rel="stylesheet" type="text/css" href="style/2.css" title="CSS2" ID="CSS2" DISABLED>
<link rel="stylesheet" type="text/css" href="style/3.css" title="CSS3" ID="CSS3" DISABLED>
下面我们就需要用JS来控制上面几个CSS文件的切换,也就是无刷新切换CSS样式表,JavaScript代码如下:
<script>
function changeCss(id)
{
    for(var i=1;i<5;i++)

    {
    if(i==id)
        document.getElementById("CSS"+i).disabled= false;
    else
        document.getElementById("CSS"+i).disabled= true;
    }
}
</script>
Js写好了,下面还需要一步,那就是让用户通过点击相应的切换风格链接去调用Js函数,从而让JS去控制样式的切换,你可以把下面的代码放在你网页的右上角,让用户点击方便:
切换网页风格:
<a href="javascript:changeCss(2)">红色记忆</a>
<a href="javascript:changeCss(2)">绿草青青</a>
<a href="javascript:changeCss(2)">蔚蓝天空</a>
好了,一个无刷新切换风格的基本实现思路和代码就是这样了,剩下的就是你去不断完善了。
企业网站建设公司-易捷网络科技
企业网站推广优化-易捷网络科技
企业邮箱申请购买-易捷网络科技
域名空间申请备案-易捷网络科技
2#

最好的CSS切换器应该使用服务器端脚本(PHP、ASP、JSP等)来开发。这样做的好处是很明显的:直接、高效、兼容性好、可以记忆用户选择、甚至可以组合不同的CSS实现相当复杂的“皮肤”切换。
先在head中添加
<link type="text/css" id="pagestyle" rel="stylesheet" runat="server" />
     要在服务端使用该样式表,需要在服务端声明:
        protected System.Web.UI.HtmlControls.HtmlGenericControl pagestyle;
     然后通过一个DropDownList来实现多个样式的切换。
private void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
{
string style = this.DropDownList1.SelectedValue;
Response.Cookies["pagestyle"].Value = style;   //Cookie保存该样式
Response.Cookies["pagestyle"].Expires = DateTime.Now.AddDays(3);
//设置cookie有效期,如果不设置则只在会话中创建,不保存该cookie。
this.pagestyle.Attributes.Add("href","style/" + style + ".css");//设置样式
}
并在页面的Page_Load中添加判断用户是否已设置了样式,如未设置,则使用默认。
if(!IsPostBack)
{
string style = string.Empty;
if(Request.Cookies["pagestyle"] != null)
{
      style = Request.Cookies["pagestyle"].Value;
}
style = (style == string.Empty) ? "blue" : style;
this.DropDownList1.SelectedValue = style;
this.pagestyle.Attributes.Add("href","style/" + style + ".css");
}
在每个需要样式切换的页面都加上这个方法,则就可以实现全站切换,当然如果共用页面头,则实现更方便。
发新话题 回复该文章列表
[Ctrl+Enter快速发布]
QQ在线咨询
网站建设
企业邮箱
域名申请
空间购买
推广优化
网站维护
网站备案
论坛制作