`

jQuery框架+cookie选择样式表文件【转】

阅读更多

HTML:

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=utf-8" />
<title>切换样式表title>
<script type="text/javascript" src="jquery.js">script>
<script type="text/javascript" src="switchStyle.js">script>
<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
head>

<body>
<h1>hello babyh1>
<a href="#" class="styles" rel="style1">style1a>
<a href="#" class="styles" rel="style2">style2a>
<a href="#" class="styles" rel="style3">style3a>
body>
html>
JS:
$(function(){
     $(
'.styles').click(function()
     {        
         switchStyle(
this.rel); //this.rel 取出当前元素属性rel的值,也可以使用id        
        return false;        
     });
    
var c=readCookie('style');
    
if (c) switchStylestyle(c);
});

function switchStyle(styleName)
{
     $(
'link[@rel*=style][@title]').each(function(i)    //遍历link
     {
        
this.disabled=true;
        
if(this.title == styleName)this.disabled = false;
     });
     createCookie(
'style',styleName,365);
}

function createCookie(name,value,days){
    
if(days)
     {
        
var date=new Date();
         date.setTime(date.getTime()
+(days*24*60*60*1000));//1000毫秒 getTime()取从1970.1.1到当前时间毫秒
        var expires=" ; expires="+date.toGMTString();
     }
else var expires=" ";
     document.cookie
=name+"="+value+expires+" ; path=/";
}

function readCookie(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);   //charAt(0) 看C的0位置是什么,如果c不存在返回" "
        if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length);
     }
    
return null;
}
function eraseCookie(name){
     createcokie(name,
"",-1)
}
css文件3个.
style1.css :
body{background:#CCCCCC;}
h1{color:red;}
style2.css :
body{background:#6699FF;}
h1{color:#336600;}

style3.css :
body{background:#CC99CC;}
h1{color:#FFFF00;}

 

分享到:
评论

相关推荐

    easyui+jquery插件+angularJS

    在压缩包中,"easyui"目录可能包含了EasyUI的库文件、样式表和示例代码。 **jQuery** 是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。"jquery"目录可能包含jQuery的核心库文件以及一些...

    jQuery+Cookie实现切换皮肤功能【附源码下载】

    CSS文件通过标签引入,其中`&lt;link id="cssfile"&gt;`用于动态更改页面样式表,从而实现皮肤切换。 `&lt;script&gt;`标签引入了jQuery库和一个名为`jquery.cookie.js`的插件,该插件允许jQuery操作Cookie。页面加载完成后,...

    jquery.treeview.zip

    2. 接着,下载jQuery Treeview插件文件,包括CSS样式表(如`jquery.treeview.css`)和JavaScript文件(如`jquery.treeview.js`)。本例中的压缩包包含这两个文件。 3. 在HTML文件中,将CSS文件链接到`&lt;head&gt;`部分,...

    jQuery Raty星级插件

    这个插件通过结合强大的jQuery框架,提供了丰富的自定义选项和功能,使得创建美观且功能丰富的星级评价变得轻而易举。 ### jQuery Raty的核心特性 1. **简单易用**:jQuery Raty插件的API设计简洁,只需几行代码...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQuery换肤

    这可以通过AJAX请求实现,或者在HTML文件中预先隐藏新皮肤的样式表,然后在需要时显示。 通过以上步骤,我们可以创建一个基本的JQuery换肤功能。但要注意,实际项目可能需要考虑更多细节,如皮肤加载时间、兼容性...

    超实用的jQuery代码段

    《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的jQuery代码段进行了全方位的介绍和演示。全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形...

    jquery-treeview

    jQuery Treeview是一个强大的JavaScript库,它利用jQuery框架的强大功能,提供了一种优雅的方式来呈现这种树状结构。本文将对jQuery Treeview进行深入探讨,包括其基本使用、核心功能、配置选项以及实际应用案例,...

    java的css、jquery、servlet、web手册

    3. 层次关系:CSS的层叠特性决定了样式优先级,内联样式&gt;内部样式表&gt;外部样式表,ID选择器&gt;类选择器&gt;标签选择器。 4. 盒模型:CSS中的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin),...

    jquery_treeview

    使用jQuery Treeview首先需要引入jQuery库和treeview插件的JavaScript文件及CSS样式表。通常,这些文件可以从jQuery插件库下载,或者通过CDN链接获取。例如: ```html &lt;link rel="stylesheet" href="jquery.treeview...

    GC jQuery UI theme switcher:jQuery插件提供了一个jQuery UI对话框来更改UI主题CSS-开源

    这个插件基于开源的jQuery库和jQuery UI框架,允许开发者为用户提供动态更改CSS样式表的能力。 jQuery UI CSS框架是一个强大的工具集,包含了多种预设的视觉样式,包括按钮、滑块、对话框等组件的样式。Theme ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    JQuery事件之页面框架和加载后自动执行 JQuery扩展以及自动执行函数的应用 JQuery阻止事件发生 JQuery扩展 作业 第18周 内容概要 JS正则详解 JS正则详解之验证 组件BootStrap、EasyUI、JQueryUI 插件轮播 Django_...

    仿华为商城部分前端界面html+css+js

    其次,CSS(层叠样式表)是用于美化HTML元素并控制页面视觉效果的工具。在这个项目中,CSS将被用来设定颜色、字体、布局、响应式设计等。开发者可能使用类选择器、ID选择器或者伪类来定位特定的HTML元素,并应用相应...

    jquery treeview树控件特效代码

    2. 在HTML文档的`&lt;head&gt;`部分引入样式表文件(通常为`jquery.treeview.css`)。 3. 在`&lt;body&gt;`标签的底部引入jQuery库和TreeView的JavaScript文件(通常是`jquery.treeview.js`)。 三、jQuery Treeview的基本用法 ...

    MagicDTree: JQuery树形插件

    5. **css** 文件夹:包含了必要的样式表,用于定义树形结构的外观,包括节点的样式、颜色、布局等。 在实际使用过程中,开发者需要将这些JavaScript文件引入到HTML页面中,并通过JQuery来实例化和操作MagicDTree。...

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    投票系统(weui框架使用)

    这个压缩包文件“toupiao”可能包含了上述所有相关技术的源代码文件,如jsp页面、CSS样式文件、JavaScript脚本、数据库配置文件以及可能的图片资源等。开发者可以通过查看这些文件,学习如何将weUI框架应用于实际...

    jQuery全年日历工作考勤表特效代码

    【jQuery全年日历工作考勤表特效代码】是一款利用JavaScript库jQuery及amazeUI.js插件构建的高效能日历应用。此应用旨在为用户提供一个全年的工作考勤管理平台,帮助用户轻松记录和查看每个月的工作天数和休假情况。...

    thinkPHP框架做的AJAX登录处理

    CSS(层叠样式表)用于定义网页元素的外观和布局,而JS框架(可能包括jQuery或其他库)则负责实现AJAX(异步JavaScript和XML)技术,使得用户无需刷新页面即可发送登录请求。 当用户点击登录按钮时,前端通过AJAX向...

Global site tag (gtag.js) - Google Analytics